Introduction to CSS Grid

« Prev Next »

CSS Grid is a powerful layout system that enables you to create complex, responsive web designs. Unlike Flexbox, which is primarily used for one-dimensional layouts (either rows or columns), CSS Grid is designed for two-dimensional layouts where you can control both rows and columns simultaneously.

css-grid

What is CSS Grid?

Grids allow for two-dimensional layouts, that is, they can work in both rows and columns. This makes them highly versatile and suitable for more complex layouts.

 

In a grid layout, you define a grid with rows and columns and then place items within the cells of that grid. You can precisely control the size, position, and spacing of these items. This makes CSS Grid ideal for creating intricate, magazine-style layouts where you want complete control over the position and alignment of content.

 

To create a grid, you set an element's display property to grid or inline-grid. This makes the element a grid container, and its direct children become grid items. You can then use other CSS grid properties to define the structure of the grid and position the grid items within it.

 

Basic Syntax

.container {
  display: grid; /* Establishes a grid container */
}
  • .container is the grid container that holds grid items (the direct children).
  • Once you apply display: grid;, the child elements become grid items and can be placed into the grid using grid properties.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
      gap: 10px;
    }

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

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

</body>
</html>
Run ›
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.