☰

Ιδιότητες και τιμές για Grid

Στήλες (columns)

Οι παρακάτω ιδιότητες αφορούν διαμόρφωση στηλών.

Για να είναι τα στοιχεία διαταγμένα ως στήλες θα πρέπει να υπάρχει η ιδιότητα:

grid-auto-flow: column;

grid-auto-columns

Καταχωρείται στο container. Ορίζει το μέγεθος των στηλών ενός grid που έχει δηλωθεί έμμεσα (implicitly).

Σύνταξη

/* Keyword values */
grid-auto-columns: min-content;
grid-auto-columns: max-content;
grid-auto-columns: auto;

/* length values */
grid-auto-columns: 100px;
grid-auto-columns: 20cm;
grid-auto-columns: 50vmax;

/* percentage values */
grid-auto-columns: 10%;
grid-auto-columns: 33.3%;

/* flex values */
grid-auto-columns: 0.5fr;
grid-auto-columns: 3fr;

/* minmax() values */
grid-auto-columns: minmax(100px, auto);
grid-auto-columns: minmax(max-content, 2fr);
grid-auto-columns: minmax(20%, 80vmax);

/* fit-content() values */
grid-auto-columns: fit-content(400px);
grid-auto-columns: fit-content(5cm);
grid-auto-columns: fit-content(20%);

/* multiple track-size values */
grid-auto-columns: min-content max-content auto;
grid-auto-columns: 100px 150px 390px;
grid-auto-columns: 10% 33.3%;
grid-auto-columns: 0.5fr 3fr 1fr;
grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

/* Global values */
grid-auto-columns: inherit;
grid-auto-columns: initial;
grid-auto-columns: unset;

Στήλες με πλάτος ίσο με το 20% του γονικού.

div#container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 0.2fr;
}

css grid responsiveness

Στήλες με διαφορετικά πλάτη.

div#container {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 75px 150px 300px auto;
}

css grid responsiveness

grid-auto-columns: min-content;

Το κείμενο αναδιπλώνεται (wrapped) μέχρι να πάρει το ελάχιστο πλάτος.

min content

grid-auto-columns: max-content;

Το κείμενο δεν αναδιπλώνεται μέχρι να πάρει το μέγιστο πλάτος.

max content

grid-column-start

Ορίζει την αρχική θέση ενός στοιχείου grid στη στήλη.

Η ιδιότητα αναφέρεται σε στοιχείο του grid.

Ένα grid μπορεί να περιέχει περισσότερα κελιά από τα στοιχεία του container. Άρα μπορεί να καλύψει ένα grid area.

Σύνταξη

/* Keyword value */
grid-column-start: auto;

/* custom-ident value */
grid-column-start: somegridarea;

/* integer + custom-ident values */
grid-column-start: 2;
grid-column-start: somegridarea 4;

/* span + integer + custom-ident values */
grid-column-start: span 3;
grid-column-start: span somegridarea;
grid-column-start: 5 somegridarea span;

/* Global values */
grid-column-start: inherit;
grid-column-start: initial;
grid-column-start: unset;

div#container {
	display: grid;
	grid-auto-flow: column;
}

div#container div:nth-child(1) {
	grid-column-start: 3;
	grid-column-end: 5;
}

css grid responsiveness

grid-column-end

Ορίζει την τελική θέση ενός στοιχείου grid στη στήλη.

Η ιδιότητα αναφέρεται σε στοιχείο του grid.

Ένα grid μπορεί να περιέχει περισσότερα κελιά από τα στοιχεία του container. Άρα μπορεί να καλύψει ένα grid area.

Σύνταξη

/* Keyword value */
grid-column-end: auto;

/* custom-ident values */
grid-column-end: somegridarea;

/* integer + custom-ident values */
grid-column-end: 2;
grid-column-end: somegridarea 4;

/* span + integer + custom-ident values */
grid-column-end: span 3;
grid-column-end: span somegridarea;
grid-column-end: 5 somegridarea span;

/* Global values */
grid-column-end: inherit;
grid-column-end: initial;
grid-column-end: unset;

grid-column

Σύντομη γραφή για grid-column-start και grid-column-end. Οι δύο τιμές χωρίζονται με την κάθετο (/).

Σύνταξη

grid-column: grid-line / grid-line;
grid-column: grid-line;
grid-column: span 2 / 7;

grid-column: 1 / 3;
grid-column: 2 / -1;
grid-column: 1 / span 2;
grid-column: 1;

Γραμμές (rows)

Οι παρακάτω ιδιότητες αφορούν διαμόρφωση γραμμών.

Για να είναι τα στοιχεία διαταγμένα ως γραμμές θα πρέπει να υπάρχει η ιδιότητα:

grid-auto-flow: row;

grid-auto-rows

Καταχωρείται στο container. Ορίζει το ύψος των γραμμών σε grid που έχει δηλωθεί έμμεσα (implicitly).

Σύνταξη

/* Keyword values */
grid-auto-rows: min-content;
grid-auto-rows: max-content;
grid-auto-rows: auto;

/* length values */
grid-auto-rows: 100px;
grid-auto-rows: 20cm;
grid-auto-rows: 50vmax;

/* percentage values */
grid-auto-rows: 10%;
grid-auto-rows: 33.3%;

/* flex values */
grid-auto-rows: 0.5fr;
grid-auto-rows: 3fr;

/* minmax() values */
grid-auto-rows: minmax(100px, auto);
grid-auto-rows: minmax(max-content, 2fr);
grid-auto-rows: minmax(20%, 80vmax);

/* multiple track-size values */
grid-auto-rows: min-content max-content auto;
grid-auto-rows: 100px 150px 390px;
grid-auto-rows: 10% 33.3%;
grid-auto-rows: 0.5fr 3fr 1fr;
grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

/* Global values */
grid-auto-rows: inherit;
grid-auto-rows: initial;
grid-auto-rows: unset;

Γραμμές με ίδιο ύψος.

div#container {
	display: grid;
	grid-auto-rows: 1fr;
}

Γραμμές με διαφορετικά ύψη.

div#container {
	display: grid;
	grid-auto-rows: 75px 150px 300px auto auto;
}

grid-row-start

Ορίζει την αρχική θέση ενός στοιχείου grid στη γραμμή.

Σύνταξη

/* Keyword value */
grid-row-start: auto;

/* custom-ident values */
grid-row-start: somegridarea;

/* integer + custom-ident values */
grid-row-start: 2;
grid-row-start: somegridarea 4;

/* span + integer + custom-ident values */
grid-row-start: span 3;
grid-row-start: span somegridarea;
grid-row-start: 5 somegridarea span;

/* Global values */
grid-row-start: inherit;
grid-row-start: initial;
grid-row-start: unset;

grid-row-end

Ορίζει την τελική θέση ενός στοιχείου grid στη γραμμή.

Σύνταξη

/* Keyword value */
grid-row-end: auto;

/* custom-ident values */
grid-row-end: somegridarea;

/* integer + custom-ident values */
grid-row-end: 2;
grid-row-end: somegridarea 4;

/* span + integer + custom-ident values */
grid-row-end: span 3;
grid-row-end: span somegridarea;
grid-row-end: 5 somegridarea span;

/* Global values */
grid-row-end: inherit;
grid-row-end: initial;
grid-row-end: unset;

grid-row

Σύντομη γραφή για grid-row-start και grid-row-end. Οι δύο τιμές χωρίζονται με την κάθετο (/).

Σύνταξη

grid-row: grid-line / grid-line;
grid-row: grid-line;
grid-row: span 2 / 7;

Παραδείγματα

grid-row: 1 / 3;
grid-row: 2 / -1;
grid-row: 1 / span 2;
grid-row: 1;

auto flow

auto-flow

Η ιδιότητα grid-auto-flow ορίζει την αυτόματη ροή και τοποθέτηση των στοιχείων μέσα στο grid.

Σύνταξη

/* Keyword values */
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;

/* Global values */
grid-auto-flow: inherit;
grid-auto-flow: initial;
grid-auto-flow: unset;

templates

Οι παρακάτω ιδιότητες αφορούν διαμόρφωση στηλών/γραμμών.

grid-template-columns

Καταχωρείται στο container. Ορίζει ονόματα και διαστάσεις στηλών.

Σύνταξη

/* Keyword value */
grid-template-columns: none;

/* track-list values */
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);

/* auto-track-list values */
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns: minmax(100px, max-content)
                       repeat(auto-fill, 200px) 20%;
grid-template-columns: [linename1] 100px [linename2]
                       repeat(auto-fit, [linename3 linename4] 300px)
                       100px;
grid-template-columns: [linename1 linename2] 100px
                       repeat(auto-fit, [linename1] 300px) [linename3];

/* Global values */
grid-template-columns: inherit;
grid-template-columns: initial;
grid-template-columns: unset;

grid-template-rows

Καταχωρείται στο container. Ορίζει ονόματα και διαστάσεις γραμμών.

Σύνταξη

/* Keyword value */
grid-template-rows: none;

/* track-list values */
grid-template-rows: 100px 1fr;
grid-template-rows: [linename] 100px;
grid-template-rows: [linename1] 100px [linename2 linename3];
grid-template-rows: minmax(100px, 1fr);
grid-template-rows: fit-content(40%);
grid-template-rows: repeat(3, 200px);

/* auto-track-list values */
grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
grid-template-rows: minmax(100px, max-content)
                   repeat(auto-fill, 200px) 20%;
grid-template-rows: [linename1] 100px [linename2]
                   repeat(auto-fit, [linename3 linename4] 300px)
                   100px;
grid-template-rows: [linename1 linename2] 100px
                   repeat(auto-fit, [linename1] 300px) [linename3];

/* Global values */
grid-template-rows: inherit;
grid-template-rows: initial;
grid-template-rows: unset;

grid-template-areas

Καταχωρείται στο container. Ορίζει areas με βάση τα ονόματα των areas.

Ένας εύκολος τρόπος διάταξης των στοιχείων grid (grid items) με τα ονόματα των κελιών που προηγούμενα έχουν ονοματιστεί.

Τα ονόματα μπορεί να είναι λέξεις ή/και γράμματα και γράφονται με τη σειρά που αντιστοιχεί στη διάταξη.

Η ιδιότητα με την οποία ορίζονται τα ονόματα και η διάταξη είναι η grid-template-areas.

grid-template-areas: 	"head head head"
						"nav  main aside"
						"foot foot foot";

grid-template-areas: 	"a a a"
						"b c c"
						"b d d";

Σύνταξη

/* Keyword value */
grid-template-areas: none;

/* string values */
grid-template-areas: "a b";
grid-template-areas: "a b b"
                     "a c d";
grid-template-areas: "head head"
                     "nav  main"
                     "nav  foot";
grid-template-areas: "head head head"
                     "nav  main aside"
                     "foot foot foot";

/* Global values */
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: unset;

grid-area

Σύντομη γραφή για: grid-row-start, grid-column-start, grid-row-end και grid-column-end.

	grid-area: a;

	grid-area: 2 / 1 / 2 / 4;

	grid-area: 2 / 2 / auto / span 3;

Σύνταξη

/* Keyword values */
grid-area: auto;
grid-area: auto / auto;
grid-area: auto / auto / auto;
grid-area: auto / auto / auto / auto;

/* custom-ident values */
grid-area: some-grid-area;
grid-area: some-grid-area / another-grid-area;

/* integer && custom-ident ? values */
grid-area: some-grid-area 4;
grid-area: some-grid-area 4 / 2 another-grid-area;

/* span && [ integer || custom-ident ] values */
grid-area: span 3;
grid-area: span 3 / span some-grid-area;
grid-area: 2 span / another-grid-area span;

/* Global values */
grid-area: inherit;
grid-area: initial;
grid-area: unset;

grid-template

Καταχωρείται στο container. Σύντομη γραφή για: grid columns, rows, και areas.

Σύνταξη

/* Keyword value */
grid-template: none;

/* grid-template-rows / grid-template-columns values */
grid-template: 100px 1fr / 50px 1fr;
grid-template: auto 1fr / auto 1fr auto;
grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
grid-template: fit-content(100px) / fit-content(40%);

/* grid-template-areas grid-template-rows / grid-template-column values */
grid-template: "a a a"
               "b b b";
grid-template: "a a a" 20%
               "b b b" auto;
grid-template: [header-top] "a a a"     [header-bottom]
                 [main-top] "b b b" 1fr [main-bottom] / auto 1fr auto;

/* Global values */
grid-template: inherit;
grid-template: initial;
grid-template: unset;

Gutters

Ορίζει το κενό ανάμεσα στα tracks με τις ιδιότητες: grid-column-gap, grid-row-gap, ή grid-gap.

grid-column-gap ή column-gap

Ορίζει το διάστημα ανάμεσα στις στήλες του grid.

Σύνταξη

/* Keyword value */
column-gap: normal; 

/* length values */
column-gap: 3px;
column-gap: 2.5em;

/* percentage value */
column-gap: 3%;

/* Global values */
column-gap: inherit;
column-gap: initial;
column-gap: unset;

grid-row-gap ή row-gap

Ορίζει το διάστημα ανάμεσα στις γραμμές του grid.

Σύνταξη

/* length values */
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;

/* percentage value */
row-gap: 10%;

/* Global values */
row-gap: inherit;
row-gap: initial;
row-gap: unset;

grid-gap ή gap

Σύντομη γραφή για row-gap και column-gap. Οι δύο τιμές χωρίζονται με διάστημα.

Σύνταξη

/* One length value */
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;

/* One percentage value */
gap: 16%;
gap: 100%;

/* Two length values */
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;

/* One or two percentage values */
gap: 16% 100%;
gap: 21px 82%;

/* calc() values */
gap: calc(10% + 20px);
gap: calc(20px + 10%) calc(10% - 5px);

/* Global values */
gap: inherit;
gap: initial;
gap: unset;