26-Feb-2025

CSS Grid

CSS Grid is a powerful layout system that allows for two-dimensional grid-based layouts, making complex responsive designs easier to manage. Unlike older methods like floats or flexbox, which are primarily designed for one-dimensional layouts, Grid excels at dividing a page into both rows and columns simultaneously.

Imagine a grid system as a table with rows and columns. You can place items into specific cells of this grid, controlling their size and position precisely. Grid is exceptionally flexible and can be used to create everything from simple image galleries to intricate application dashboards.

Here’s how you can create a basic grid layout:

<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Example</title>
<style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Creates 3 equal-width columns */
  grid-template-rows: repeat(2, 100px); /* Creates 2 rows with 100px height */
  grid-gap: 10px; /* Adds 10px gap between rows and columns */
}

.item {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

</body>
</html>

In this example:

display: grid; enables the grid layout for the container.
grid-template-columns: repeat(3, 1fr); creates three equal-width columns. 1fr represents a fraction of the available space.
grid-template-rows: repeat(2, 100px); creates two rows, each 100px high.
grid-gap: 10px; sets the spacing between rows and columns.

This creates a 3x2 grid. You can further customize item placement using properties like grid-column-start, grid-column-end, grid-row-start, and grid-row-end to span items across multiple rows or columns.

CSS Grid simplifies responsive design by providing a robust structure for arranging content. Its ability to adapt to different screen sizes makes it an invaluable tool for building modern, dynamic web layouts. Combined with media queries, you can further tailor the grid behavior for specific breakpoints. For example:

/* For screens smaller than 600px */
@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr; /* Single column layout */
  }
}

This snippet modifies the layout for smaller screens by making the grid single-column, showcasing Grid’s flexibility in responsive design.