Grid Rows and Columns

CSS Grid Layout is not only a forward-looking specification, but one of the most recent major initiatives in CSS. It‘s a two dimensional layout system allowing you to layout your content on the web both across (rows) and down (columns) at the same time. When you set display: grid you can then take control over the layout of the element via grid-template-rows/columns and often called fr the fractional unit. ColumnGrid is not only easy to span multiple tracks (columns/rows) but space is automatically managed by setting a grid-gap. This is the most logical way of building up a complex website layout.

1. The Grid Container and Items

irst, you need a Container (parent) with Items (children).

• The Container: You turn it on by writing display: grid;.
• The Items: Any direct child inside that container automatically becomes a “grid item.”

2. Columns: The Vertical Slices

Columns are configured top to bottom. (Define the columns using grid-template-columns.)

Suppose you want three equal columns. Use the fr unit (which means “fraction” of the available space):

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; 
}

• Easy Tip: If you want one column to be twice the width of the other columns, you would type 2fr 1fr 1fr.

3. Rows: The Horizontal Slices

Horizontal lines (rows) are from left to right. You define them with grid-template-rows.

Most often, we allow the rows to grow to fit the content, but if you want to specify the height instead:

CSS

.container {
  display: grid;
  grid-template-rows: 100px 200px;
}

This creates a first row that is 100 pixels tall and a second row that is 200 pixels tall.

4. The Gap (The “Gutter”)

My absolute favorite feature of grid is the gap property. Instead of having to set an individual margin between each item, all you need do is specify the amount of space you‘d like to see between the boxes.

• column-gap: 20px; (Space between columns)
• row-gap: 20px; (Space between rows)
• gap: 20px; (Shortcut for both)

5. Placing Items (Grid Lines)

This is how it becomes powerful. The browser considers the “columns” and “rows” as “lines” numbering from 1.

If you want a single item to span across two columns, you tell it where to start and where to end:

CSS

.big-item {
  grid-column: 1 / 3; /* Starts at line 1, ends at line 3 */
}

6. Why use Grid vs. Flexbox?

A simple way to remember:

• Flexbox is for a row OR a column (1D). Great for navbars or aligning a few buttons.
• Grid is for rows AND columns at the same time (2D). Great for entire page layouts or complex photo galleries.

Summary Table

Check out our resources!

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