Show List
Tutorials > CSS > CSS Grid

CSS Grid

CSS Grid is a two-dimensional layout system that provides a structured way to lay out elements on a web page. Grid allows you to create complex layouts by defining rows and columns and placing elements into the grid cells.

Here are some basic examples of using CSS Grid:

  1. Defining the grid: To create a grid, you need to define the number of rows and columns and set the display property of the container to grid. For example:
.container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: 200px 200px;
}
  1. Placing items into the grid: To place items into the grid, you can use the grid-column and grid-row properties. For example:
.item:first-child {
   grid-column: 1 / 3;
   grid-row: 1 / 2;
}

.item:last-child {
   grid-column: 3;
   grid-row: 2;
}
  1. Gap between items: By using the grid-gap property, you can add space between the items in the grid. For example:
.container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: 200px 200px;
   grid-gap: 20px;
}
  1. Auto-placement of items: By using the grid-auto-flow property, you can control how the items are automatically placed into the grid. For example:
.container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: 200px 200px;
   grid-auto-flow: row dense;
}
These are just a few examples of using CSS Grid. With Grid, you can create a wide range of complex and flexible layouts for your web pages.


Next: CSS Transitions and Animations

    Leave a Comment

  • captcha text