Ultimate layout tool
- Grid enables us to created grids.
- We can work on 2-dimension, vertical & horizontal axis at the same time.
- Opens up new layout possibilities which we didn’t had.
Setting up a grid
display: grid;
- Margins no longer collapse
Template rows and columns
grid-template-columns: 200px 200px 350px; // set the width
grid-template-rows: 50px 200px; // set the height
// shorthand
grid-template: 50px 200px / 200px 200px 350px;
Placing items on the grid
// Used on grid container
grid-template-columns: 200px 200px 350px; // set the width
grid-template-rows: 50px 200px; // set the height
// Used on grid item
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
// shorthand
grid-row: 1 / 3;
grid-column: 2 / 3;
// end line is -1
grid-column: 1 / -1; // start to the end
- Overlaying items are easy.
Spanning
grid-column: span 2; // from line 1 to 3
grid-column: 2 / span 2; //from line 2 to 4
Similarities to flexbox
-
auto
When defining our rows, we mostly don’t want to set an exact height, we want it to match the content.
grid-template-row: 50px auto;
Height is fixed to the largest item’s height. Every items are stetched as default.
If we don’t declare
grid-template-row
, it becomes auto. -
align-items & justify-items
- justify-items: align each items horizontally
- align-items: align items vertically
justify-items: end; align-items: start;
-
align-self & justify-self
Similar to 2, but it applies to individual grid item.
Making gap between columns & rows
For margin, we can make empty column & row. Also we can use gap
.
- column-gap: Explicitly declare gap between columns
- row-gap: Explicitly declare gap between rows
column-gap: 2em;
row-gap: 1em;
// shorthand
gap: 1em /2em;
- Gaps at the outer top, bottom, left, right is not added, so we have to use the empty column & row approach.
- Also used for flexbox.
grid-areas
Give names to different parts of grid.
.grid {
grid-template-areas:
"sidebar header header"
"sidebar content content"
"sidebar footer footer";
}
.header {
grid-area: header;
}
.content {
grid-area: content;
}
-
blank grid
// for blank grid grid-template-areas: "header header header" ". content ." ". sidebar ." "footer footer footer";
-
grid-area + media query
.grid { grid-template-columns: 5em auto 5em; grid-template-areas: "header header header" ". content ." ". sidebar ." "footer footer footer"; } @media (min-width: 600px) { .grid { grid-template-columns: 1em auto 150px 1em; grid-template-areas: ". header header ." ". content sidebar ." ". footer footer ." } }
minmax()
Setting a min-width and max-width to our template columns and rows.
grid-template-columns: 1em minmax(100px, 200px) auto 1em;
fr unit
fr unit is used to distribute a fraction of available space. It makes the item behave like a flex item with flex: 1 1 auto
.
Easiest way to create equal columns.
-
We cannot use fr for minimum value
Instead we can use
auto
or0px
.
grid-template-columns: 1fr minmax(250px, 1fr) 1fr; grid-template-columns: 1fr 1fr minmax(auto, 500px);
Top comments (0)