https://jasenpan1987.github.io/nexter/
1.1 template
grid-template-rows
grid-template-columns
grid-template-area
1.2 gap
grid-row-gap
grid-column-gap
justify-items
align-items
justify-content
align-content
grid-auto-rows
grid-auto-columns
grid-auto-flow
grid-row
grid-row-start
grid-row-end
grid-column
grid-column-start
grid-column-end
grid-area
justify-self
align-self
Demo 1: https://codepen.io/anon/pen/vpmxMm?editors=1100
-
grid-template-row: repeat(2, 150px)
: equals togrid-template-row: 150px 150px
-
1fr
: 1fraction unit, which means to occupies all the remaining space of a track, for instance,grid-template-columns: repeat(3, 1fr)
. fr is a basically a unit for ratios. And also, it can be mixed with other unit such asgrid-template-columns: 50% 1fr 1fr
; means the first column takes half of the spaces and the 2nd and 3rd one takes 1 quarter each, this kind of mixture will not take the gap into account. -
Currently, firefox has grid friendly devtool, we can use that to help us build the grid layout. Devtool -> layout -> overlay grid -> display line numbers
.item1 {
background-color: orange;
grid-row: 2/3;
grid-column: 3/4;
}
Expand cell items: Simply give the row or column a higher number so it can grow. But it will push the other items down or right. And I can set the items visible by setting the z-index to a higher value. .item3 { background-color: palevioletred; grid-row: 2 / 3; grid-column: 1 / 3; }
Alternatively, we can set the span property with a value
.item2 {
background-color: green;
grid-column: 1 / span 2; // here it means the item start with column 1 and will span 2 columns
}
If I want to span an item to the end, I can put -1,
.item3 {
background-color: palevioletred;
grid-row: 2 / -1; // starts from the 2nd row, end at the end
grid-column: 1 / 3;
}
Example: create a small website layout: https://codepen.io/anon/pen/dJWWxK?editors=1100
Instead of the 1, 2, 3 … we can give the name for the grid lines.
grid-template-rows:
[header-start] 50px [header-end box-start] 100px
[box-end main-start] 200px [main-end footer-start] 50px [footer-end];
grid-template-columns: repeat(3, [col-start] 1fr [col-end]) 100px[grid-end];
For repeating, the col-start and col-end will be transformed to col-start 1, col-start 2... col-end 1, col-end 2...
To use it, we can simply reference to the line names instead of the line numbers, and this is a more professional practice.
Example: https://codepen.io/anon/pen/OzmjQj?editors=1100
(This is very useful for small layouts, and we must fill in each cell, otherwise it will not work.)
We can also give each cell a name by doing this after we defines the grid-template-rows and grid-template-columns
grid-template-areas:
"head head head head"
"box1 . box2 side"
"main main main side"
"foot foot foot side";
Each of these rows and columns corresponding to a cell or column in the actual grid layout, and the . means an empty cell.
Then when we set the cell positions, we can do something like this: grid-area: head;
Example: https://codepen.io/anon/pen/vpmeYZ?editors=1100
This technique can be useful for smaller layouts but not very useful for the big ones.
In grid system, the items with explicit row and column tracks are call explicit cells, it is kind of “undefined” by the grid layout. For example, in a grid layout, if we only define a 2X2 grid, and at the same time, we have 8 items, the last 4 will become explicit items.
We can define the style for all of these explicit cells by using
grid-auto-rows: 50px;
grid-auto-columns: .5fr;
And we can set the flow direction for these cells by using
grid-auto-flow: column;
grid-auto-flow: row dense;
The dense will make it automatically fill the empty cells.
Example: https://codepen.io/anon/pen/mpmBEp?editors=1100
In the previous examples, the actual content within a cell are all expand to fill the entire cell (both horizontally and vertically), but it is not always what we want.
In grid layout, we have properties just work similarly like in flex box, the align and justify.
In the container element, we can set align-items to center, start and end, which position the content in the specific location in Y axis. The default is stretch.
In the container element, we can set justify-items to center, start and end, which position the content in the specific location in X axis. The default is stretch.
These will define all the content in cells. But if we want to overwrite the alignment defined in the container for a specific cell item, we can use align-self
or justify-self
.
align-self: stretch;
justify-self: stretch;
The available values will be the same as the ones in the container.
Example: https://codepen.io/anon/pen/jYmGQO?editors=1100
Just like flex-box, we can align the entire grid content (all the cells as a whole) vertically and horizontally.
To align the content horizontally, we can use
justify-content: center;
To align the content vertically, we can use
align-content: center;
The available options for these two properties are stretch (default), center, start, end, space-between, space-around and space-evenly. These options work exactly the same as in flex-box.
min-content: take content space as less as possible, the content can be wrapped.
max-content: take as content space as much as possible, the content will not be wrapped.
minmax: a function that gives the min and max value to a row or column.
Example: https://codepen.io/anon/pen/BJRmJN?editors=1100
We can use the following trick to build the responsive grid layout without media query
- Set a container a percentage width: width: 80%;
- Give the column a fraction fit width, and repeat it with auto fit times: grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); The grid will shrink until it reaches the 100px limit, then it will go to the next line.
Steps of building grid columns in real life project
-
Normally, we start with a pre-defined grid layout, such as 8 column layout or 12 column layout. grid-template-columns: repeat(8, 1fr);
-
Then we make the width of each column to a static number grid-template-columns: repeat(8, 14rem);
-
We can then make the columns responsive by using the mixmax functions, here it basically means the max width is 14rem, and it will be at least wrap the content with line breaks grid-template-columns: repeat(8, minmax(min-content, 14rem));
How to make an image 100% fit in a container
- Create a wrapper for the image
- Using the following trick
&__img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}