Unlock the Secrets of CSS Grid Mastery 🎨

CSS Grid is a powerful two-dimensional layout system that allows developers to divide available space on a page into rows and columns, positioning elements into them. In this article, we will explore CSS Grid in depth, covering its core concepts and features through examples.

Introduction to Grid Layout

CSS Grid provides a robust layout mechanism for websites and web applications, without needing float, flexbox or other strategies for positioning elements. Some key advantages of Grid include:

• Defining an explicit grid structure with columns and rows, allowing precise control over element positioning.

• Creating flexible responsive layouts that dynamically adapt to different screen sizes through properties like fr units.

• Positioning elements into multiple tracks, with properties like grid-column and grid-row.

• Logical thinking for layouts rather than specific units like pixels. Grid lines and areas make for intuitive markup.

To enable Grid on an element, we set its display property to grid:

.container {
  display: grid;
}

This establishes it as a grid container that can then have child elements laid out within it.

Defining the Grid Structure

Grid's structure is defined using the grid-template-columns and grid-template-rows properties on the container.

For example:

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

This creates a 3 column, 2 row grid with fixed sizing. We'll explore more flexible ways to size columns and rows later.

By default, each .container child becomes a grid item that participates in this explicit structure.

Fractional Unit Sizing with fr

For responsive layouts, we can use CSS Grid's fr unit to define column/row sizes as flexible fractions of the available space.

For example, to have 3 equally-sized columns:

grid-template-columns: 1fr 1fr 1fr;

This divides the container into 3 equal widths, no matter the size. If we added a 4th 1fr column, each would resize to 25% width.

We can also mix fr units with fixed units like pixels:

grid-template-columns: 200px 1fr 2fr;

Here the first column is 200px, and the remaining space is divided into a 1:2 ratio for the other two columns.

Repeat Function Shorthand

To avoid repeating values like multiple 1fr fractions, we can use the repeat() function:

grid-template-columns: repeat(3, 1fr);

This repeats the 1fr value 3 times, creating the same effect as the first fr example more concisely.

Implicit and Explicit Grid Lines

Grid lines are the dividing lines between columns/rows. Two types of lines exist:

• Explicit lines declared with template properties

• Implicit lines created by grid items themselves

For example, if we declared grid-template-columns: 100px 100px; with two explicit 100px columns, a third implicit line would be created after the second item.

This distinction is important when manipulating grids through properties like grid-column later on.

Adding Gaps Between Columns and Rows

We can control the amount of space, or gaps, between grid columns and rows using:

grid-gap: 10px; /* column-gap and row-gap */

/* or */

column-gap: 5px;
row-gap: 10px;

This is a common technique to add visual separation between items. The grid-gap shorthand is ideal for quick implementation.

Aligning and Justifying Items

Items can be aligned within their grid areas in several ways. The place-items shorthand combines:

• justify-items - Horizontal alignment

• align-items - Vertical alignment

Possible values include stretch, start, end, center and more.

For example:

.container {
  place-items: center; 
}

Centers each item vertically and horizontally within its row/column bounds.

Aligning the Grid Container

While align-items controls item-to-item alignment, align-content handlesalignment of the container as a whole. For multi-line grids, its values like stretch, start and more control distribution of space between rows.

.container {
  align-content: stretch; 
}

Grid Item Placement Controls

Individual items have properties to precisely position them within the grid structure:

• grid-column: establishes column lines placement

• grid-row: establishes row line placement

• grid-area: places an item into a named grid area

• Negative indices work from the end of the grid starting at -1

Here are some additional details about grid item placement controls:

grid-column Property

The grid-column property controls an item's column placement, allowing it to span multiple columns if needed.

It accepts values like:

• 1 / 3 - starts at line 1 and ends at line 3

• 2 - spans from explicit line 2 to implicit next line

• -1 / 4 - starts at last explicit line and ends at line 4

For example:

.item {
  grid-column: 1 / 3; 
}

grid-row Property

Similarly, grid-row controls row placement, with the same value syntax as grid-column.

spans and Repeat Notation

Values like 2 / span 2 are a shorthand starting at line 2 and spanning 2 lines. This is equivalent to 2 / 4.

We can also repeat a value using repeat() as in:

grid-column: repeat(3, 1fr);

grid-area Property

The grid-area property provides a shorthand for defining both row and column placement simultaneously, through 4 values:

grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

For example:

.item {
  grid-area: 1 / 2 / 3 / 4;  
}

Places the item from row 1, column 2 to row 3, column 4.

These properties allow explicit, pixel-precise positioning of elements within the grid.

💡 If you find this article helpful then don't forgot follow me in Github and Twitter .

Like 💖

Share🔗

Follow me in Hashnode ✅