ACSS grid is defined using thegrid value of thedisplay property; you can define columns and rows on your grid using thegrid-template-rows andgrid-template-columns properties.

The grid that you define using these properties is described as anexplicit grid.

If you place content outside of this explicit grid, or if you are relying on auto-placement and the grid algorithm needs to create additional row or columntracks to holdgrid cells, then extra tracks will be created in the implicit grid. Theimplicit grid is the grid created automatically due to content being added outside of the tracks defined.

In the example below I have created anexplicit grid of three columns and two rows. Thethird row on the grid is animplicit grid row track, formed due to their being more than the six items which fill the explicit tracks.

Example

* {  box-sizing: border-box;}.wrapper {  border: 2px solid #f76707;  border-radius: 5px;  background-color: #fff4e6;}.wrapper > div {  border: 2px solid #ffa94d;  border-radius: 5px;  background-color: #ffd8a8;  padding: 1em;  color: #d9480f;}

.wrapper {  display: grid;  grid-template-columns: 1fr 1fr 1fr;  grid-template-rows: 100px 100px;}

<div>  <div>One</div>  <div>Two</div>  <div>Three</div>  <div>Four</div>  <div>Five</div>  <div>Six</div>  <div>Seven</div>  <div>Eight</div></div>

See also

• Basic concepts of grid layout
• Property reference:
  • grid-template-columns
  • grid-template-rows
  • grid
  • grid-template