Chapter- 6 CSS Grid Layout

CSS Grid Layout is a strong 2 dimension layout system. Unlike Flexbox, which works only for arranging items in one direction, either a row or a column, CSS Grid enables you to work with both rows and columns simultaneously.

Sort of like a piece of graph paper where you know exactly how far along each “box” begins and ends.

1. The Core Concept: Container vs. Items

To use Grid, you need two things:

1. The Grid Container: the “house” within which you activate the grid.
2. The Grid Items: Within the parent, the child items.

To begin you just have to apply display: grid; in your container.

2. Defining Columns and Rows

You tell the browser how many “tracks” (columns and rows) you want using these properties:

• grid-template-columns: defines the width of each column.
• grid-template-rows: Define the height of each row.

The “fr” Unit (Fractional Unit)

Grid introduced a special unit called fr. It represents a fraction of the available space.

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Middle column is twice as wide as the others */
  grid-template-rows: 100px auto;     /* First row is 100px, second fits the content */
}

3. Creating Gaps

Rather than relying on dirty margins to give spacings between boxes, there are builtin “gutters”.

• column-gap: Space between columns.
• row-gap: Space between rows.
• gap: A shorthand to set both at once.

CSS

.container {
  gap: 20px; /* Puts 20px of space between every item */
}

4. Positioning Items (Grid Lines)

This is the default placement: in order. However, you can have an item reside exactly where you want it to be on the Grid Lines. If you think about having 3 columns, you actually have 4 lines: the two edges of the grid and the lines between the columns.

• grid-column: Specifies to a grid item which of the vertical lines to span along.
• grid-row: sets an item which row should be spans and ones;

Example: A Sidebar and Main Content

CSS

.sidebar {
  grid-column: 1 / 2; /* Starts at line 1, ends at line 2 */
}
.main-content {
  grid-column: 2 / 4; /* Spans across two columns */
}

5. Grid Template Areas (The “Map” Method)

This is the most human-friendly method of interacting with the Grid. You give your objects names, then display a visual representation of your layout as text.

CSS

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
/* ...and so on */

6. Why use Grid over Flexbox?

• Use Flexbox when you have a list of items and you just want them to line up nicely in a row (like a navigation bar).
• Use Grid when you are designing a full page layout or a complex UI where items need to align perfectly in both directions (like a dashboard).

Summary Checklist

1. Activate: Set display: grid.
2. Columns/Rows: Define them with grid-template-columns/rows.
3. Spacing: Use gap.
4. Placement: Use grid-column or grid-template-areas to put things where they belong.

Check out our resources!

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