Grids
Fraction units and repeat
.container {
display: grid;
/* three items in one row: the first and last item is 100px and the center one responsively changes */
grid-template-columns: 100px auto 100px;
/* two rows, 50px each */
grid-template-rows: 50px 50px;
grid-template-columns: 1fr 2fr 1fr; /* three items in one row, the center one being 2 times the length of the first and last one */
grid-template-columns: repeat(3, 1fr); /* equal to 1fr 1fr 1fr */
grid-template: /* row */ repeat(2, 50px) / /* column */ repeat(3, 50px);
grid-gap: 3px;
}
Positioning Items
.container {
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 40px 200px 40px;
}
.header {
grid-column-start: 1; /* header starts at first column line (= leftmost) */
grid-column-end: 3; /* and ends at third column (= rightmost) */
/* there is three column lines b/c the margin lines are also counted as a column line
ex) | col1 | col2 |:
|(first column line) col1 |(second column line) col2 |(third column line) */
/* these are all equal */
grid-column: 1 /* start */ / 3 /* end */;
grid-column: 1 /* start */ / span 2;
grid-column: 1 / -1 /* the last column line */
}
Template Areas
instead of indexing areas in grid, we can assign them string names
.container {
height: 100%;
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 40px auto 40px;
grid-template-areas:
". h h h h h h h h h h ." /* . excludes that area */
"m c c c c c c c c c c c"
". f f f f f f f f f f .";
grid-template-areas:
"h h h h h h h h h h h h" /* 12 * 3, same as the size of grid */
"m c c c c c c c c c c c"
"f f f f f f f f f f f f";
}
.header {
grid-area: h;
}
.menu {
grid-area: m;
}
.content {
grid-area: c;
}
.footer {
grid-area: f;
}
Auto-fit and Minmax
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, 100px) /* fits as many columns as possible in the current width, which will be floor(width / 100) for this case */;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* if some frames are left as remainder when setting each column to 100px, use 1fr instead - always uses full width */
grid-template-rows: repeat(2, 100px);
/*
Since number of rows change depending on width(since width is auto-fit), we can't explicitly state the number of rows, so we use auto-rows
*/
grid-auto-rows: 100px;
}
Named Lines
.container {
height: 100%;
display: grid;
grid-gap: 3px;
/* blanks are column spaces */
/*main-start content-start content-end|main-end*/
grid-template-columns: [main-start] 1fr [content-start] 5fr [content-end main-end];
/*
main-start
(40px)
content-start
(auto)
content-end
(40px)
main-end
*/
grid-template-rows: [main-start] 40px [content-start] auto [content-end] 40px [main-end];
}
.header {
grid-column: main; /* adds postfix -start, -end */
}
.menu {}
.content {
grid-area: content;
}
.footer {
grid-area: main; /* this does not work cause header and menu content already took up the main-start to content-end rows */
grid-column: main; /* can only use columns instead */
}
justify and align
.container {
border: 1px solid black;
height: 100%;
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 100px);
/* justify: columns */
justify-content: start; /* moves all items to left side */
justify-content: center; /* moves all items to center side */
justify-content: end; /* moves all items to right side */
justify-content: space-between; /* much space as possible along column */
/* align: rows */
align-content: start; /* moves all items to up side */
align-content: center; /* moves all items to center row */
align-content: end; /* moves all items to down side */
space-evenly; /* much space as possible along column, no space at edges */
space-around; /* much space as possible along column, half space at edges */
/* items: stretch by default */
justify-items: stretch | center | start | end;
align-items: stretch | center | start | end;
}
.content {
grid-column: 3 / -1;
justify-self: center; /* only justifies itself */
align-self: end; /* only aligns itself */
}