CSS Grid

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.

  • 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).

  • 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).

  • 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>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store