Grid Layout

CSS Grid is a powerful two-dimensional layout system that allows you to create complex and responsive designs with ease. It’s like a table, but far more flexible and designed specifically for web layouts.

What is CSS Grid?

CSS Grid is a layout system that allows you to divide a webpage into rows and columns. You define the structure, and then place content within those grid cells. It’s ideal for creating magazine-style layouts, complex dashboards, and responsive designs that adapt to different screen sizes. Unlike older layout methods like floats, Grid provides true two-dimensional control, meaning you can control both rows and columns simultaneously.

Basic Example

Let’s create a simple grid with two columns and two rows.

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

Now, the CSS:

.grid-container {
  display: grid; /* Turns the div into a grid container */
  grid-template-columns: 1fr 1fr; /* Two columns, each taking up half the space (1 fraction) */
  grid-template-rows: 100px 100px; /* Two rows, each 100 pixels tall */
  gap: 10px; /* Adds a 10px gap between grid items */
}
 
.grid-item {
  background-color: lightgray;
  padding: 20px;
  text-align: center;
}

Explanation:

• .grid-container is the parent element, and display: grid makes it a grid container.
• grid-template-columns defines the columns (size and number). 1fr means “one fraction” of the available space.
• grid-template-rows defines the rows (size and number).
• .grid-item are the child elements that will be placed within the grid.
• gap adds space between the grid items, improving readability.

Practical Usage

Let’s make a simple website header, main content, and footer layout.

<div class="container">
  <header>Header</header>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

And the CSS:

.container {
  display: grid;
  grid-template-columns: 1fr; /* One column that spans the whole width */
  grid-template-rows: auto 1fr auto; /* Header, main content, footer */
  height: 100vh; /* Make the container take up the full viewport height */
}
 
header {
  background-color: #eee;
  padding: 20px;
}
 
main {
  background-color: #f9f9f9;
  padding: 20px;
}
 
footer {
  background-color: #eee;
  padding: 20px;
}

Explanation:

• The container uses grid to organize the header, main content, and footer.
• grid-template-columns: 1fr ensures the content takes up the full width.
• grid-template-rows: auto 1fr auto sets the header and footer to auto-size based on content, and the main content to take up the remaining space. 1fr will expand to fill available space.
• height: 100vh ensures the container fills the entire viewport height.

Key Takeaways

• CSS Grid helps you create complex layouts by dividing a page into rows and columns.
• display: grid turns an element into a grid container.
• grid-template-columns and grid-template-rows are used to define the grid’s structure.
• fr units are used for flexible column and row sizing.
• Grid is a powerful tool for building responsive and adaptable web designs.