Introduction

When it comes to web design, a well-structured layout is key to creating visually appealing and user-friendly websites. Enter CSS Grid, a powerful tool that revolutionizes the way we arrange elements on a web page. In this blog, we'll embark on a journey to explore the magic of CSS Grid, demystify its principles in a simple manner, and showcase a practical example to solidify your understanding.

What is CSS Grid? CSS Grid is a two-dimensional layout system that allows web developers to create complex layouts by dividing the page into rows and columns. It's like a grid structure, where we can position HTML elements anywhere within the grid, defining their size, position, and spacing.

The Grid Container and Grid Items: To start using CSS Grid, we need to understand two essential components.

Grid Container

The container that holds all the elements we want to arrange using the grid is known as the Grid Container. We set the display property of the container to "grid" to enable CSS Grid.

cssCopy code.container {
  display: grid;
}

Grid Items

The elements inside the Grid Container are referred to as Grid Items. These are the elements we want to arrange within the grid.

Defining the Grid: Now that we have our Grid Container set up, we need to define the structure of our grid. This involves specifying the number of rows, columns, and their sizes.

cssCopy code.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Three columns with relative sizes */
  grid-template-rows: 100px 200px; /* Two rows with fixed heights */
}

In the example above, we've created a grid with three columns, where the middle column takes up twice the width of the first and third columns. We also have two rows, one with a height of 100px and the other with a height of 200px.

Placing Grid Items

Now comes the exciting part! We can place the Grid Items anywhere within the grid using the grid-row and grid-column properties.

cssCopy code.item1 {
  grid-row: 1; /* Placing the item in the first row */
  grid-column: 1; /* Placing the item in the first column */
}

.item2 {
  grid-row: 1 / span 2; /* Placing the item in the first row and spanning two rows */
  grid-column: 2; /* Placing the item in the second column */
}

.item3 {
  grid-row: 2; /* Placing the item in the second row */
  grid-column: 3; /* Placing the item in the third column */
}

In this example, we have three grid items (item1, item2, and item3). The first item is placed in the first row and the first column. The second item spans two rows starting from the first row and is placed in the second column. The third item is placed in the second row and the third column.

Practical Example Output

Let's put all the pieces together and create a simple web page layout using CSS Grid.

HTML

htmlCopy code<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="item1">Item 1</div>
    <div class="item2">Item 2</div>
    <div class="item3">Item 3</div>
  </div>
</body>
</html>

CSS (styles.css)

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

.item1, .item2, .item3 {
  padding: 10px;
  text-align: center;
  font-size: 20px;
  background-color: #3498db;
  color: #fff;
}

Output

When you open the HTML file in a web browser, you should see a grid-based layout with three items arranged as follows:

 __________________________________
|           Item 1                 |
|__________________________________|
|           Item 2                 |
|                                  |
|                                  |
|__________________________________|
|           Item 3                 |
|__________________________________|

In the end.

CSS Grid is a powerful layout system that simplifies the way we design web page layouts. By grasping the concepts of Grid Containers, Grid Items, and grid placement properties, you can create stunning and organized designs. So, go ahead and experiment with CSS Grid, and you'll be amazed at the limitless possibilities it offers for web layout design.

kohinoor's blog