Grid Container

CSS Grid Container: A parent element that applies display: grid to position all of its child elements in a grid system. Unlike floats and inline-block elements, it allows you to control vertical and horizontal alignment simultaneously. Set grid-template-columns and size gaps between items to achieve visually interesting, grid-based designs without using a lot of code.

The Basics: Two Main Players

1. The Container (The Parent): The container is the box of everything. Toggle the grid on here.
2. The Items (The Children): the boxes inside the grid that make be moved into the rows and columns.

1. How to Start: display: grid;

To make any box a grid, you just give it this command:

CSS

.container {
  display: grid;
}

2. Defining Your Columns and Rows

The single most important thing about a grid is to let it know how many ‘lanes’ it has.

Columns (grid-template-columns)

If you want three columns of equal width, you write:

• grid-template-columns: 200px 200px 200px; (Fixed size)
• grid-template-columns: 1fr 1fr 1fr; (1fr means “1 fraction.” This makes three equal columns that stretch to fill the screen).

Rows (grid-template-rows)

This works exactly the same way but for height:

• grid-template-rows: 100px 200px; (The first row is 100px high, the second is 200px).

3. Creating Space: gap

So what we where doing today was using “margins” to split the boxes… For the grid you just need to be selected as a referred gap. Which is acting like the gutter in-between two lines.

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px; /* Puts 20px of space between all boxes */
}

4. The “Magic” Command: repeat()

If you want 12 columns, you don‘t want to type 1fr twelve times. You can use a shortcut:

• Grid-template-columns: repeat(12, 1fr); (Instantly creates twelve equal columns).

5. Example Code (Simple Layout)

Here‘s how you would create a simple page.

HTML:

HTML

<div class="container">
  <div class="item">Header</div>
  <div class="item">Sidebar</div>
  <div class="item">Main Content</div>
  <div class="item">Footer</div>
</div>

CSS:

CSS

.container {
  display: grid;
  /* Create two columns: one small (200px), one big (fills rest) */
  grid-template-columns: 200px 1fr; 
  /* Create three rows */
  grid-template-rows: 80px 400px 80px; 
  gap: 10px;
}

.item {
  background-color: lightblue;
  border: 1px solid blue;
  padding: 20px;
}

Summary Table

Check out our resources!

• Bootstrap Templates: Explore our Bootstrap Projects section.
• Free E-Books: Download your Free E-Books here.