What is Grid in CSS and How to use Grid CSS better way

What is Grid in CSS

Grid CSS, or CSS Grid Layout, is a layout system in CSS (Cascading Style Sheets) that enables the creation of two-dimensional layouts. It provides a way to arrange and design web page elements in rows and columns, making it easier to create complex and responsive web layouts.

CSS Grid Layout is different from the traditional box model layout that is based on floats and positioning. Instead, it allows you to define a grid with rows and columns and then place elements into specific grid areas. This makes it more intuitive and powerful for creating complex web designs.

Example

Here’s a basic example of how CSS Grid works:

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

.item {
  grid-column: span 2;
}

Example demonstration

  1. The .container class defines a grid container with three columns of equal width and two rows with specific heights.
  2. The .item class specifies that an element should span two columns within the grid. CSS Grid provides a flexible and efficient way to handle the layout of a webpage, and it is well-supported by modern web browsers. It has become a popular choice for web developers due to its simplicity and power in creating responsive and intricate layouts. Keep in mind that developments in web technologies may have occurred since my last update in January 2022, so it’s a good idea to check for any updates or changes in the specifications.

use grid css

CSS Grid Layout is a powerful layout system that allows you to create complex two-dimensional layouts with rows and columns. Here’s a simple example to demonstrate how to use CSS Grid:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* Three columns with equal width */
      grid-gap: 10px; /* Gap between grid items */
    }

    .item {
      background-color: #3498db;
      color: #fff;
      padding: 20px;
      text-align: center;
    }
  </style>
  <title>CSS Grid Example</title>
</head>
<body>

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

</body>
</html>

Output:

Screenshot-2023-11-12-191141

Let’s break down the key parts of this example:

  1. The .container class has display: grid, which establishes a new grid formatting context for its children.

  2. grid-template-columns: repeat(3, 1fr); sets up three columns with equal width. The repeat function is used for simplicity here.

  3. grid-gap: 10px; creates a gap of 10 pixels between grid items.

  4. Each .item class represents a grid item. They have a blue background color, white text color, padding, and are centered within their respective grid cells.

This is a basic example, and CSS Grid offers many more features and possibilities for creating complex layouts. You can control the placement of items, create responsive layouts, and more with the flexibility that CSS Grid provides. Feel free to experiment and modify the code to suit your specific needs!

Previous
Mastering CSS Align-items and Align-self for Seamless Layouts
Next
CSS Grid Properties - Gap, Grid Column Gap, Grid Template Columns