CSS Grid

CSS Grid is a powerful layout system in CSS that allows you to create complex grid-based layouts for web pages. It provides a two-dimensional grid structure where you can position and align elements in rows and columns. CSS Grid offers more control and flexibility compared to traditional layout methods like floats or inline-block elements. Here's an example of how to use CSS Grid:

HTML:

<div class="grid-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>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Three equal-width columns */
  grid-gap: 10px; /* Gap between grid items */
}

.item {
  background-color: #eaeaea;
  padding: 20px;
  text-align: center;
}

In the example above, we create a grid container using the display: grid property. Inside the container, we have six grid items represented by <div> elements with the class "item". The grid-template-columns property defines the columns of the grid, with 1fr 1fr 1fr specifying three equal-width columns. The grid-gap property sets the gap or spacing between grid items.

The .item class sets some basic styling for the grid items, such as a background color, padding, and center-aligned text.

By using CSS Grid, you can easily create more complex layouts, control the placement of items, create responsive designs, and apply different sizing and positioning techniques. CSS Grid offers features like grid templates, grid lines, grid areas, and alignment properties to give you precise control over your layout.