Display: Grid

on

CSS Grid: The Tool for 2D Layouts



In this module, we are going to learn all about CSS Grid, a powerful CSS tool that makes it easier to create two-dimensional layouts.

After learning about Flexbox, you might look at a layout and think you could manage it with Flexbox by defining widths, alignment, and spacing. But when it comes to more complex layouts, Flexbox alone can be difficult to manage. That’s where CSS Grid comes in.

Flexbox vs Grid

  • Flexbox: Best for 1D layouts (either row or column).

  • Grid: Best for 2D layouts (both rows and columns).

Even in real-world examples, you will often see Flexbox inside Grid or Grid inside Flexbox. Each tool has its strengths and weaknesses, and using them together gives you the flexibility to create almost any layout.

Understanding Grid

  1. Set the container to grid

.container {
  display: grid;
}

  1. Define columns and rows

.container {
  grid-template-columns: 1fr 2fr; /* two columns, second is twice as wide */
  grid-template-rows: 1fr 1fr;    /* two equal-height rows */
  gap: 10px;                      /* spacing between rows and columns */
}

  • fr means fraction.

  • gap sets the spacing between grid items.

  1. Grid automatically lays out items

  • Divs automatically fill rows and columns based on the grid.

  • Extra items create new rows if needed.

Example: Chess Board

Goal: Create an 8x8 chess board with 64 divs.

  • Each square: 100px by 100px

  • Alternating colors: black and white

.container {
  display: grid;
  grid-template-columns: repeat(8, 100px); /* 8 equal columns */
  grid-template-rows: repeat(8, 100px);    /* 8 equal rows */
  width: 800px;                            /* compact board */
  gap: 0;                                  /* no spacing between squares */
}

  • Grid will automatically arrange all 64 divs in rows and columns.

  • If extra width exists, gaps may appear, so a fixed width keeps the board compact.

Key Points

  1. CSS Grid is perfect for 2D layouts.

  2. Flexbox is perfect for 1D alignment.

  3. You can combine both for flexible and responsive designs.

  4. Grid makes it easy to create complex layouts like dashboards, chess boards, and more.

Comments

Post a Comment