CSS grid

by | Sep 8, 2024 | Technology

The CSS Grid is a powerful layout system in CSS that allows you to create flexible and complex web page layouts. It divides a web page into rows and columns, enabling precise control over the placement of items.

Key Concepts of CSS Grid:

  1. Grid Container: The parent element where the grid is defined.
  2. Grid Items: The child elements within the grid container.
  3. Grid Lines: The lines that divide the grid into cells.
  4. Grid Tracks: Rows and columns created by grid lines.

Basic CSS Grid Example:

HTML Structure:

html

<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right Sidebar</div>
<div class="item5">Footer</div>
</div>

CSS for Grid Layout:

css

.grid-container {
display: grid;
grid-template-columns: 1fr 3fr 1fr; /* Three columns: 1 fraction for sidebars, 3 fractions for the main content */
grid-template-rows: auto 1fr auto; /* Auto height for header and footer, flexible space for main content */
grid-gap: 10px; /* Space between grid items */
}

.item1 {
grid-column: 1 / 4; /* Span all 3 columns for the header */
}

.item2 {
grid-column: 1 / 2; /* First column for the menu */
}

.item3 {
grid-column: 2 / 3; /* Main content in the middle column */
}

.item4 {
grid-column: 3 / 4; /* Right sidebar in the last column */
}

.item5 {
grid-column: 1 / 4; /* Footer spans all 3 columns */
}

Explanation:

  • display: grid;: Declares the element as a grid container.
  • grid-template-columns: Defines the number of columns and their width. 1fr means one fraction of the available space, and 3fr means three times the space of 1fr.
  • grid-template-rows: Defines the rows and their height. In this case, the header and footer have automatic heights (auto), while the main content takes up the remaining flexible space (1fr).
  • grid-column: Specifies the start and end column lines for each item (e.g., 1 / 4 means the item spans from the 1st to the 4th column line).

More Advanced Features:

  • Grid Areas: You can define named areas and place items within them.
  • Auto Placement: The browser can automatically place items within the grid.
  • Responsive Design: CSS Grid works seamlessly with media queries to create layouts that adapt to different screen sizes.

Let’s dive into two more advanced aspects of CSS Grid: Grid Areas and Responsive Design.

1. Grid Areas:

With Grid Areas, you can define named areas on your grid, making it easier to position elements.

Example of Grid Areas:

HTML Structure:
html

<div class="grid-container">
<div class="header">Header</div>
<div class="menu">Menu</div>
<div class="main">Main Content</div>
<div class="sidebar">Sidebar</div>
<div class="footer">Footer</div>
</div>
CSS Using Grid Areas:
css

.grid-container {
display: grid;
grid-template-areas:
"header header header"
"menu main sidebar"
"footer footer footer";
grid-template-columns: 1fr 3fr 1fr; /* Three columns: 1fr, 3fr, 1fr */
grid-gap: 10px;
}

.header {
grid-area: header; /* Assign the header to the "header" area */
}

.menu {
grid-area: menu; /* Assign the menu to the "menu" area */
}

.main {
grid-area: main; /* Assign the main content to the "main" area */
}

.sidebar {
grid-area: sidebar; /* Assign the sidebar to the "sidebar" area */
}

.footer {
grid-area: footer; /* Assign the footer to the "footer" area */
}

Breakdown:
  • grid-template-areas: Defines the layout using named areas.
    • “header header header”: The header spans all three columns.
    • “menu main sidebar”: Three areas for the menu, main content, and sidebar.
    • “footer footer footer”: The footer spans all columns.
  • grid-area: Each grid item is assigned to one of these named areas.

This method is especially useful when you want a clear and visual way to define complex layouts.

2. Responsive Design with CSS Grid:

CSS Grid makes it easy to create layouts that adapt to different screen sizes using media queries.

Example of a Responsive Grid Layout:

HTML Structure:
html

<div class="grid-container">
<div class="header">Header</div>
<div class="menu">Menu</div>
<div class="main">Main Content</div>
<div class="sidebar">Sidebar</div>
<div class="footer">Footer</div>
</div>
CSS for Responsive Design:
css

/* Base layout for large screens */
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-areas:
"header header header"
"menu main sidebar"
"footer footer footer";
grid-gap: 10px;
}

/* Mobile layout for screens smaller than 600px */
@media (max-width: 600px) {
.grid-container {
grid-template-columns: 1fr; /* A single column layout for small screens */
grid-template-areas:
"header"
"main"
"menu"
"sidebar"
"footer";
}
}

Breakdown:
  • Base Layout: For larger screens (desktops), the grid has three columns (1fr 3fr 1fr) and areas for header, menu, main content, sidebar, and footer.
  • Media Query: For screens smaller than 600px (e.g., smartphones), the layout changes to a single-column grid (1fr), stacking the elements vertically. The grid-template-areas are redefined to reflect this.

This allows the design to adapt to different screen sizes, making it mobile-friendly.

Combining Grid Areas and Responsive Design:

You can combine both concepts to create layouts that rearrange based on the screen size.

css

.grid-container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-areas:
"header header header"
"menu main sidebar"
"footer footer footer";
grid-gap: 10px;
}

/* Mobile layout for screens smaller than 768px */
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"menu"
"sidebar"
"footer";
}
}

In this example:

  • On larger screens, the layout maintains a traditional three-column structure.
  • On smaller screens, the layout switches to a single column, stacking the grid items vertically.
×
Sign in
Sign up

Sign In

Sign Up