Introduction to CSS Grid

Hello, developers!

Today, we’ll explore CSS Grid, a layout system that provides more control and flexibility when building web pages. With Grid, you can create complex and responsive layouts without relying on external frameworks or hacks.

What is CSS Grid?

CSS Grid is a two-dimensional layout system that allows you to define both rows and columns, giving you more control over the positioning of elements on a page.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

Key Grid Properties Here are a few important properties to get started:

grid-template-columns: Defines the number of columns in the grid. grid-template-rows: Defines the number of rows in the grid. grid-gap: Adds spacing between grid items. grid-column: Specifies how many columns an item will span. grid-row: Specifies how many rows an item will span. Example

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>
 
<style>
  .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    padding: 10px;
  }
  .box {
    background-color: lightcoral;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: white;
  }
</style>

In this example, we’ve created a grid with two columns and four boxes. Each box takes up one grid cell, and you can easily adjust the number of columns or rows to fit your layout needs.

CSS Grid is perfect for complex designs that require precise control over placement and alignment.

Happy coding!