CSS Grid — Understand How it Works
CSS Grid Layout is one of the most powerful CSS modules that has been introduced. It excels at dividing a page into major regions, with rows and columns, making it easier to design web pages without having to use floats and positioning.
CSS Grid has now become fully supported in all main browsers: Safari, Firefox, Chrome, Edge. As for Internet Explorer 10 and 11, it only supports it using an old implementation and an outdated syntax.
Before we delve into Grid concepts, let’s cover Grid’s basic terminology.
* — Grid terminology
- grid components
A grid container and its children
- grid lines
defines columns and rows of the grid
- grid cell
is the smallest unit you would have on your Grid. Conceptually much like a table cell, it is the space between four intersecting grid lines.
- grid track
is the space between two grid lines. For example, here the grid track is between row grid lines 2 and 3.
- grid area
is one or more grid cells. For example, here the grid area is between row grid lines 2 and 4, and column grid lines 1 and 5.
- grid gutters
Gutters or alleys are spacing between content tracks (gap).
Now let’s start checking the properties of the grid container.
* — Properties for the grid container
- display
display: grid;
display: inline-grid;This can define an inline grid container or a block grid container.
- grid-template-columns / grid-template-rows
The grid-template-columns specifies the line name, track size functions of grid columns.
The grid-template-rows specifies the line name, track size functions of grid rows.
Options:
- none
- auto
- <track-size> …
- <line-name> <track-size> …
<track-size> can be a length, a percentage, or a fraction of the free space in the grid (using the fr unit)
grid-template-columns: none;
grid-template-columns: 100px 1fr;
grid-template-columns: [linename1] 100px;
grid-template-columns: [linename1] 100px [linename2];- minmax(min, max)
defines the minimum and the maximum size of a grid column/row.
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: minmax(100px, max-content);max-content represents the widest element according to the content.
min-content represents the narrowest element according to the content.
- repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
The repeat() keyword permits to repeat columns as many times as needed. repeat() accepts the number of repetitions for the first value, the grid tracks to repeat for the second value.
grid-template-columns: repeat(4, 200px);Here we created 4 grid columns with 200 px width.
If we want to let the browser decide how many columns to create as long as they would fit the grid container, we use the keyword auto-fill or auto-fit .
auto-fill would fill the row with as many columns as it can fit.
auto-fit would look for the currently available columns and try to expand these columns so they take up the available space.
To tell the difference between these two, we specify a minimum width using minmax() , so that the columns won’t get too narrow.
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) );
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr) );You see here that auto-fill divided the row with as many possible columns that they fit the grid container, even if they are empty.
However, auto-fit divided the row with the currently available columns without creating empty ones, then it expanded these columns to fit the grid container.
- fit-content( [ <length> | <percentage> ] )
only defines the maximum value could a grid column/row takes.
grid-template-columns: fit-content(40%);for the minimum, the grid column/row would take up as little space as necessary, as you can see below:
The same properties goes for the The
grid-template-rows
- grid-template-areas
After you create each grid area, you use grid-template-areas to specify these areas.
Options: none | <string>+
.area-a { grid-area: header; }
.area-b { grid-area: main; }
.area-c { grid-area: sidebar; }
.area-d { grid-area: footer; }
.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer"; }
You can use a dot to declare an empty cell.
*- Shorthand: grid-template
A shorthand to set grid-template-columns, grid-template-rows, and grid-template-areas in a single declaration.
Options: none | <grid-template-rows> / <grid-template-columns>
.container {
grid-template:
[row1] "header header header" 150px [row2]
[row2] "footer footer footer" 150px [row3]
/ auto 200px auto;}
which is equivalent to :
.container {
grid-template-rows: [row1] 150px [row2] 150px [row3];
grid-template-columns: auto 200px auto;
grid-template-areas:
"header header header"
"footer footer footer";}
- grid-column-gap / grid-row-gap
Sets the size of the gap (gutter) between an element’s columns or rows.
Options: normal | <length> | <percentage>
grid-column-gap: 3px;
grid-row-gap: 1%;*- Shorthand: grid-gap
A shorthand for grid-row-gap and grid-column-gap
Options: <grid-row-gap> <grid-column-gap>
grid-gap: 15px 10px;- justify-content
Distributes the space around grid items along the inline axis (row) of the grid container.
Options: start | end | center | stretch | space-around | space-between | space-evenly
- align-content
Distributes the space around grid items along the block axis (column) of the grid container.
Options: start | end | center | stretch | space-around | space-between | space-evenly
*- Shorthand: place-content
A shorthand for align-content and justify-content
Options: <align-content> / <justify-content>
place-content: start space-around;- justify-items
Aligns all grid items along the inline axis (row)
Options: start | end | center | stretch
- align-items
Aligns all grid items along the block axis (column)
Options: start | end | center | stretch
*- Shorthand: place-items
A shorthand for align-items and justify-items
Options: <align-items> / <justify-items>
place-items: start end;* — Properties for the grid items
- align-self
Aligns a grid item inside a cell along the block axis (column)
Options: start | end | center | stretch
- justify-self
Aligns a grid item inside a cell along the inline axis (row)
Options: start | end | center | stretch
*- Shorthand: place-self
A shorthand to set align-self and justify-self in a single declaration.
Options: auto | <align-self> / <justify-self>
place-self: center stretch;- grid-column-start / grid-column-end __ grid-row-start / grid-row-end
Sets the location of a grid item by indicating precise start/end grid lines.
Options: <number> | <name> | span <number> | span <name> | auto
- <number> — number of the grid line
- <name> — name of the grid line
- span <number> — the item will span across the grid by the given number of tracks
- span <name> — the item will span across the grid until it hits the line with the given name
- auto — indicates auto-placement, an automatic span, or a default span of 1
*- Shorthand: grid-column / grid-row
grid-column: a shorthand for grid-column-start and grid-column-end
grid-row: a shorthand for grid-row-start and grid-row-end
Options: <start-line> / <end-line>
grid-column: 3 / span 2;
grid-row: third-line / 4;*- Shorthand: grid-area
Works as a shorthand for grid-row-start ,grid-column-start ,grid-row-end and grid-column-end.
Or you can use it to set a <name> , which can then be placed using grid-template-areas.
Options: <name> | <row-start> / <column-start> / <row-end> / <column-end>
.area-a { grid-area: header; }
.area-b { grid-area: 1 / col4-start / last-line / 6 }* — grid Auto properties
- grid-auto-columns / grid-auto-rows
specifies the size of any implicit grid tracks.
Options: <track-size>
grid-auto-columns: 100px;implicit grid tracks are the grid tracks created outside a grid, this happens when you set the location of a grid column out of the range of a grid.
.container {
display: grid;
grid-template-columns: 150px 150px;
}.item-x {
grid-column: 5 / 6;
grid-row: 1 / 2;
}
here I specified 2 columns with grid-template-columns , however, when creating item-x you’ll notice its position is outside of the grid grid-column: 5 / 6; => the grid now will create implicit grid tracks to fill in the missing tracks.
By default implicit grid tracks are auto-sized, you can, however, specify their size using grid-auto-columns
The same goes for the grid rows.
- grid-auto-flow
Controls how auto placed items get flowed into the grid.
Options: row | column | row dense | column dense
dense fills in each row | column with any holes available in the grid
*- Shorthand: grid
Shorthand for setting grid-template-columns, grid-template-rows, grid-template-areas, grid-auto-columns, grid-auto-rows, and grid-auto-flow in a single declaration.
grid: 150px auto 150px / repeat(4, 200px);Layout the rows, then the columns. This is the same as:
grid-template-rows: 150px auto 150px;grid-template-columns: repeat(4, 200px);
If we want to add grid-template-areas
grid-template-rows: 150px 200px 200px 150px;
grid-template-columns: repeat(4, 200px);
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";the grid becomes:
grid: "header header header header" 150px
"main main . sidebar" auto
"footer footer footer footer" 150px
/ 150px 200px 200px 150px;Note: For a single grid declaration, we can not combine explicit and implicit grid properties.
grid-template-columns, grid-template-rows, grid-template-areas are explicit grid properties.
grid-auto-columns, grid-auto-rows, and grid-auto-flow are implicit grid properties.
So the options with grid are:
grid-template-columns,grid-template-rowsandgrid-template-areasgrid-template-rows/[auto-flow && dense?]grid-auto-columns?[auto-flow && dense?]grid-auto-rows?/grid-template-columns
? optional
/* grid-template-rows / [auto-flow && dense?] grid-auto-columns? */
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;/* [auto-flow && dense?] grid-auto-rows? / grid-template-columns */grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
Conclusion
I hope this guide helped you understand the basics and core concepts of CSS Grid. You can further explore CSS Grid with more examples.
Thank you for reading, I would appreciate your applause and sharing :-)
For more articles, check out the links below:
