Establishing the Grid, Tracks, & Gaps

Establishing your grid container is the first step in building a grid. This container will be the parent element for your grid-based layout.

<style>
  section.grid-container {
    display: grid;
  }
</style>
<section class="grid-container">
...
</section>

Note: There are two display types that can be used grid & inline-grid. For the purpose of webpage layouts, we will be focusing on grid for this lesson.

Once your parent container is established, then you can start building your grid tracks. The grid tracks consist of columns and rows that will help you establish the basic structure of your grid layout. Below are the CSS properties used for column, row, and gap designations within a parent grid-container element.

grid-template-columns & grid-template-rows	Defines the number of columns and rows in the grid.
grid-column-gap/column-gap*	Defines the amount of space between each column in the grid. (The default is 0px.)
grid-row-gap/row-gap*	Defines the amount of space between each row in the grid. (The default is 0px.)

* column-gap and row-gap are shortened versions of the properties grid-column-gap and grid-row-gap. Both are acceptable for use, depending on your preference.

The following code snippet sets your grid layout to three columns and three rows, dividing the available grid space into 9 grid cells.

You can use auto, px (pixels), % (percentage), or fr (fractional unit) to establish layout of columns/rows.

<style>
  section.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    column-gap: 20px;
    row-gap: 20px;
  }
</style>

Notice that the number of grid template values is equal to the number of columns and rows:
grid-template-column: 1fr + 1fr + 1fr = 3 columns
grid-template row: 1fr + 1fr + 1fr = 3 rows

If you know you want a specific sequence to repeat, you can use the repeat() value for grid-template-columns or grid-template-rows.

<style>
  section.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }
</style>

is the same as:

<style>
  section.grid-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }
</style>

Using your own text editor or the coding space below, play around with your own grid layout. Insert different column and row values and see what happens! Once you feel like you have a good understanding of how grid tracks and gaps work, move on to the next lesson page to learn even more about grid containers!

To get you started, copy and paste the following code snippet into your practice coding environment and adjust the values as desired. (Try using % based values, px based values, fr based values, and auto.)

<style>
  section.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-row: repeat(3, 1fr);
    background-color: purple;
    padding: 10px;
  }
  section div.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 5px;
    font-size: 1.2em;
    text-align: center;
  }
</style>
<section class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</section>

Where are the grid container properties?

You Try!