CSS Grid
CSS Grid is basically a new value of CSS property “Display” that is “grid”. CSS Grid gives you the ability to make a two-dimensional layout (mean with columns and rows). It is a totally replacement of the “Float” structured layout. Now you can handle all width, height, direction, alignment, and responsibility from one place. It means clean code and fast coding work and there is no need for any CSS framework.
Grid Container
The element on which display: grid is applied. It’s the direct parent of all the grid items.
Grid Item
The children (i.e. direct descendants) of the grid container.
<div class="container">
<div class="item"> </div>
<div class="item">
<p class="sub-item"> </p>
</div>
<div class="item"> </div>
</div>Grid Line
The lines between columns are called column lines. The lines between rows are called row lines.
Grid Cell
The space between two adjacent row and two adjacent column grid lines. It’s a single “unit” of the grid.
Grid Track
The space between two adjacent grid lines. You can think of them as the columns or rows of the grid.
Grid Area
The total space surrounded by four grid lines. A grid area may be composed of any number of grid cells.
some of the shorthand properties of Grid
- grid-template-columns: It is used to specify the size of the columns.
- grid-template-rows: It is used to specify the row size.
- grid-template-areas: It is used to specify the grid layout by using the named items.
- grid-auto-rows: It is used to specify the automatic size of the rows.
- grid-auto-columns: It is used to specify the automatic size of the columns.
- grid-auto-flow: It is used to specify how to place auto-placed items and the automatic row size.
<html>
<head>
<style>
.main {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 250px 200px;
background-color: black;
grid-gap: 10px;
padding: 20px;
}
.num {
background-color: lightgrey;
text-align: center;
padding: 20px 15px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="main">
<div class="num">One</div>
<div class="num">Two</div>
<div class="num">Three</div>
<div class="num">Four</div>
<div class="num">Five</div>
<div class="num">Six</div>
<div class="num">Seven</div>
<div class="num">Eight</div>
<div class="num">Nine</div>
</div>
</body>
</html>Justify-Content Property
Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px. In this case, you can set the alignment of the grid within the grid container. This property aligns the grid along the inline (row) axis (as opposed to align-content which aligns the grid along the block (column) axis).
The justify-content property
- start — aligns the grid to be flush with the start edge of the grid container.
- end — aligns the grid to be flush with the end edge of the grid container.
- center — aligns the grid in the center of the grid container.
- stretch — resizes the grid items to allow the grid to fill the full width of the grid container.
- space-around — places an even amount of space between each grid item, with half-sized spaces on the far, ends.
- space-between — places an even amount of space between each grid item, with no space at the far ends.
- space-evenly — places an even amount of space between each grid item, including the far ends.
<html>
<head>
<style>
.grid-container1 {
display: grid;
justify-content: space-evenly;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container2 {
display: grid;
justify-content: space-around;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
grid-gap: 10px;
background-color: red;
padding: 10px;
}
.grid-container3 {
display: grid;
justify-content: space-between;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
grid-gap: 10px;
background-color: green;
padding: 10px;
}
.grid-container4 {
display: grid;
justify-content: end;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
grid-gap: 10px;
background-color: violet;
padding: 10px;
}
.grid-container5 {
display: grid;
justify-content: start;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
grid-gap: 10px;
background-color: gray;
padding: 10px;
}
.grid-container6 {
display: grid;
justify-content: center;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
grid-gap: 10px;
background-color: blue;
padding: 10px;
}
.num {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<b>CONTAINER WITH SPACE-EVENLY VALUE</b>
<div class="grid-container1">
<div class='num'>1</div>
<div class='num'>2</div>
<div class='num'>3</div>
</div>
<b>CONTAINER WITH SPACE-AROUND VALUE</b>
<div class="grid-container2">
<div class='num'>1</div>
<div class='num'>2</div>
<div class='num'>3</div>
</div>
<b>CONTAINER WITH SPACE-BETWEEN VALUE</b>
<div class="grid-container3">
<div class='num'>1</div>
<div class='num'>2</div>
<div class='num'>3</div>
</div>
<b>CONTAINER WITH END VALUE</b>
<div class="grid-container4">
<div class='num'>1</div>
<div class='num'>2</div>
<div class='num'>3</div>
</div>
<b>CONTAINER WITH START VALUE</b>
<div class="grid-container5">
<div class='num'>1</div>
<div class='num'>2</div>
<div class='num'>3</div>
</div>
<b>CONTAINER WITH CENTER VALUE</b>
<div class="grid-container6">
<div class='num'>1</div>
<div class='num'>2</div>
<div class='num'>3</div>
</div>
</body>
</html>Align-Content Property
Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px. In this case, you can set the alignment of the grid within the grid container. This property aligns the grid along the block (column) axis (as opposed to justify-content which aligns the grid along the inline (row) axis).
The Align-content property
- start — aligns the grid to be flush with the start edge of the grid container.
- end — aligns the grid to be flush with the end edge of the grid container.
- center — aligns the grid in the center of the grid container.
- stretch — resizes the grid items to allow the grid to fill the full height of the grid container.
- space-around — places an even amount of space between each grid item, with half-sized spaces on the far ends.
- space-between — places an even amount of space between each grid item, with no space at the far ends.
- space-evenly — places an even amount of space between each grid item, including the far ends.
<html>
<head>
<style>
#main {
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap;
align-content: center;
}
#main div {
width: 70px;
height: 70px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:pink;"></div>
</div>
<p><b>Note:</b> Internet Explorer 10 and earlier versions do not support the align-content property.</p>
</body>
</html>