create nested item using emet .container>.item.item-${item $}*6
create style for container
.container {
background-color: #ddd;
width: 800px;
margin: 40px auto;
}
.item {
padding: 30px;
font-size: 30px;
color: #fff;
}
.item-1 {
background-color: #f00;
}
.item-2 {
background-color: #0f0;
}
.item-3 {
background-color: #00f;
}
.item-4 {
background-color: #ff0;
}
.item-5 {
background-color: #0ff;
}
.item-6 {
background-color: #f0f;
}
add these properties to the container class
.container {
...
display: grid;
display: grid;
grid-template-columns: 150px 150px 150px 150px;
grid-template-rows: 150px 150px 150px;
}then we'll see the result like:
from the result we know that the element try to fill the column first.
To add gap row and column, we can use grid-row-gap and grid-column-gap. Or we can add both gap in one property grid-gap or just gap.
.container {
...
grid-gap: 10px;
}we can also use fractional units to set the grid.
.container {
...
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}then we'll see the result like:
the four fraction unit (1fr) in column will divide the container into 4 equal part.
change the grid-template-columns to repeat(4, 1fr) then you'll see the same result.
Another case if you want to make left side bar that take up 20% of the container width and the body has two grid columns. then you can set the grid to:
.container {
...
grid-template-columns: 1fr repeat(2, 2fr);
}we also can use percentage to set the grid.
.container {
...
grid-template-columns: 20% repeat(2, 1fr);
}you can also use viewport like this:
.container {
...
grid-template-rows: 100vh 100vh;
}that means the grid have 2 rows and each row take up 100% of the viewport height.
see index2.html for the usage.
create a grid layout like this:
the example of naming grid items in the file index3.html.
the example of grid area usage is in index4.html.
create new index html and bootstrap in the body html with .container>.item{item-$}*8 to get nested item. Then add style to the container and item classes
.container {
width: 600px;
background-color: #efefef;
margin: 3rem auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 2rem;
}
.item {
font-size: 2rem;
background-color: royalblue;
color: #fff;
text-align: center;
}As you see in the picture below, four of the items are placed in the explicit grid because it's explicitly defined in the grid template. The other four items are placed in the implicit grid.
In order to change hight of implicit rows, we can use property called grid-auto-rows.
```css
.container {
...
grid-auto-rows: 100px;
}
```
so the implicit rows will have height 100px like this:
we can also set grid-auto-flow to column (by default is row) to make the implicit items placed in the column. as now we have implicit columns, we can also set the width of the implicit columns using grid-auto-columns.
```css
.container {
...
grid-auto-columns: 120px;
grid-auto-flow: column;
}
```
create new html file (see the result in index6.html), add bootstrap in the body html with .container>.item{item-$}*8 to get nested item. Then add style to the container and item classes
.container {
width: 900px;
background-color: #efefef;
margin: 3rem auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 2rem;
}
.item {
font-size: 1rem;
background-color: royalblue;
color: #fff;
}so we can get result
now try to add justify-items: center; and align-items: center; to the container class (the default value for these properties is strecht). now the item will be centered in the grid cell.
Try to play with other values such as start and end.
However the properties are set for all item nested on the container. If you want to align individual cell, you can use justify-self and align-self property.
To start, let add item-3 class on the Item 3 box, then add justify-self: end; and align-self: end; to the item-3 class. now the Item 3 box will be aligned to the end of the grid cell.
Now let's span the Item 3 box to two columns and two rows so it will center in the grid cell and change the values to center then you'll see the result:
create new html file (see the result in index7.html), add bootstrap in the body html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
width: 900px;
background-color: #efefef;
margin: 3rem auto;
display: grid;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(2, 100px);
}
.item {
font-size: 1rem;
background-color: black;
color: #fff;
display: block;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="item">Item-1</div>
<div class="item">Item-2</div>
<div class="item">Item-3</div>
<div class="item">Item-4</div>
<div class="item">Item-5</div>
<div class="item">Item-6</div>
<div class="item">Item-7</div>
<div class="item">Item-8</div>
</div>
</body>
</html>
then add justify-content: center; and align-content: center; to the container class. now the grid track will be centered in the container.
try another property value like space-between, space-around and space-evenly. this is the result for space-between.
create new html file (see the result in index8.html), add bootstrap in the body html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
width: 800px;
background-color: #efefef;
margin: auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 150px 150px;
grid-gap: 1rem;
}
.item {
font-size: 2rem;
background-color: black;
color: #fff;
display: block;
text-align: center;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="item">Item-1</div>
<div class="item">Item-2</div>
<div class="item">Item-3</div>
<div class="item">Item-4</div>
<div class="item">Item-5</div>
<div class="item">Item-6</div>
<div class="item">Item-7</div>
<div class="item">Item-8</div>
</div>
</body>
</html>
change the first value 1fr to max-content in the grid-template-columns, so the final value will be max-content 1fr 1fr 1fr; then you'll see the result:
if we change the value of the first column to min-content, the result will be like this:
the different is not so big. try to change the text from text 1 to lorem ipsum bla bla then you'll notice significant difference.
The last feature is minmax() function. it can be used to set the minimum and maximum value of the grid track. in the example above, we set the first column to minmax(150px, 300px), so the first column will have minimum width of 150px and maximum width of 300px.
.container {
...
grid-template-columns: min-content 1fr 1fr minmax(150px, 300px);
...
}try to shrink the browser window, you'll notice that the last column keep maintain the max width of 300px and will start to shrink to 150px only if there is no space available for the last column.
create new html file (see the result in index9.html), add bootstrap in the body html
Autofill fills the row with as many columns as it can fits. So when we use autofill, it creates implicit columns whenever new column can fit.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
width: 800px;
background-color: #efefef;
margin: 40px auto;
display: grid;
grid-template-columns: repeat(auto-fill, 80px);
}
.item {
font-size: 2rem;
background-color: black;
color: #fff;
display: block;
text-align: center;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="item">Item-1</div>
<div class="item">Item-2</div>
<div class="item">Item-3</div>
<div class="item">Item-4</div>
<div class="item">Item-5</div>
<div class="item">Item-6</div>
<div class="item">Item-7</div>
<div class="item">Item-8</div>
</div>
</body>
</html>
In many cases, autofill is not quite useful, but we also have autofit, which is more useful and helpful.
change this property grid-template-columns: repeat(auto-fill, 80px); to grid-template-columns: repeat(auto-fit, 80px); and see the result:
usually autofit combine with minmax() function to create a responsive grid layout. change the grid-template-columns: repeat(auto-fit, 80px); to grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); and see the result: