CSS Grid Layout Mastery - Complete Guide to Modern Grid Systems

Introduction: CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, with features that make it easier to design grid-based layouts without needing floats or positioning.

1. Basic Grid Container

To create a grid container, set the display property to 'grid' or 'inline-grid':

1
2
3
4
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px;
  gap: 10px;
}

2. Grid Container Properties

These properties are applied to the grid container:

Property Description Values
display Defines a grid container grid | inline-grid
grid-template-columns Defines columns in the grid length, percentage, fr, repeat(), minmax()
grid-template-rows Defines rows in the grid length, percentage, fr, repeat(), minmax()
grid-template-areas Defines named grid areas names separated by spaces
grid-gap Defines gaps between grid items row-gap column-gap
justify-items Aligns grid items along the inline axis start | end | center | stretch
align-items Aligns grid items along the block axis start | end | center | stretch
justify-content Aligns the grid along the inline axis start | end | center | stretch | space-around | space-between | space-evenly
align-content Aligns the grid along the block axis start | end | center | stretch | space-around | space-between | space-evenly

3. Grid Template Columns and Rows

Define the structure of your grid using various units:

1
2
3
4
5
6
7
8
9
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Creates 3 equal columns */
  grid-template-rows: repeat(3, 80px); /* Creates 3 rows of 80px each */
  gap: 10px;
}

/* Other examples */
grid-template-columns: 200px 1fr 1fr; /* First column fixed, others flexible */
grid-template-columns: 1fr 2fr 1fr; /* Middle column twice as wide */
grid-template-columns: repeat(4, minmax(100px, 1fr)); /* Responsive columns */

4. Grid Areas and Named Areas

Use named areas for more readable and maintainable layouts:

Header
Sidebar
Main Content
Footer
.grid-layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 80px 1fr 60px;
  gap: 10px;
}

.grid-item.header {
  grid-area: header;
}

.grid-item.sidebar {
  grid-area: sidebar;
}

.grid-item.main {
  grid-area: main;
}

.grid-item.footer {
  grid-area: footer;
}

5. Grid Item Properties

These properties are applied to grid items:

Property Description Values
grid-column-start Defines starting column position integer | span n | name
grid-column-end Defines ending column position integer | span n | name
grid-column Shorthand for column start and end start / end | start / span n
grid-row-start Defines starting row position integer | span n | name
grid-row-end Defines ending row position integer | span n | name
grid-row Shorthand for row start and end start / end | start / span n
grid-area Shorthand for all grid positions row-start / col-start / row-end / col-end
justify-self Aligns item along inline axis start | end | center | stretch
align-self Aligns item along block axis start | end | center | stretch

6. Spanning Grid Items

Make grid items span multiple rows or columns:

Spans 2 columns
Item 2
Spans 2 rows
Item 4
Item 5
.item-span-cols {
  grid-column: 1 / 3; /* Spans from column 1 to column 3 */
  /* or */
  grid-column: span 2; /* Spans 2 columns */
}

.item-span-rows {
  grid-row: 2 / 4; /* Spans from row 2 to row 4 */
  /* or */
  grid-row: span 2; /* Spans 2 rows */
}

7. Responsive Grid Layout

Creating responsive layouts with CSS Grid:

Card 1
Card 2
Card 3
Card 4
Card 5
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

/* Media queries for different screen sizes */
@media (max-width: 768px) {
  .responsive-grid {
    grid-template-columns: 1fr; /* Single column on mobile */
  }
}

8. Practical Example: Dashboard Layout

A complex dashboard layout using CSS Grid:

Header
Sidebar
Main Content
Sidebar 2
Widget 1
Widget 2
Footer
.dashboard {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 60px 1fr 1fr 60px;
  gap: 10px;
  height: 400px;
}

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

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

.main-content {
  grid-area: 2 / 2 / 3 / 3;
}

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

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

.widget2 {
  grid-area: 3 / 3 / 4 / 4;
}

.footer {
  grid-area: 4 / 1 / 5 / 4;
}

9. Grid vs Flexbox

When to use Grid vs Flexbox:

Browser Support Note: CSS Grid is supported in all modern browsers. For older browsers (IE10-11), you may need to use alternative layout methods or polyfills.

10. Best Practices

  1. Start with a simple grid structure and build complexity gradually
  2. Use fr units for flexible columns that adapt to available space
  3. Leverage repeat() and minmax() for responsive layouts
  4. Use named grid areas for complex layouts to improve readability
  5. Test your layouts across different screen sizes and devices
  6. Consider accessibility when creating grid layouts
  7. Combine Grid with other CSS features like Flexbox when needed
Home