sushil

CSS Grid

Sushil's photo
Sushil
·

3 min read

A sophisticated layout technology called CSS Grid makes it simple to make intricate, two-dimensional layouts. By allowing you to arrange pieces in a grid-like structure and even modify their size and location inside the grid, it offers a versatile and user-friendly solution to design the style of your website. To get you started, we'll discuss CSS Grid in this post and offer some sample code.

Introduction to CSS Grid

You must define a grid container before you can use CSS Grid. The elements that will be arranged in the grid are called grid items, and the grid container is an element that holds those grid items. Here is an illustration of defining a grid container:

htmlCopy code<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

In this example, the div element with the class "grid-container" is the grid container, and the div elements with the class "grid-item" are the grid items. Now let's create the CSS for the grid container.

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

In this case, we're telling the browser that this element should be a container for a grid by setting the display attribute to grid. The grid-template-columns and grid-template-rows attributes are also being used to specify the quantity and size of the columns and rows in our grid. In this scenario, we're building a 3x2 grid with each column having the same size (1fr), and each row being 100 pixels long. Lastly, we're adding a 10-pixel space between each grid item using the grid-gap attribute.

Let's arrange the grid objects inside the grid now that the grid container is ready.

cssCopy code.grid-item {
  background-color: #ccc;
  padding: 10px;
}

In this example, we're giving each grid item a background color of gray and adding some padding to make the content within each grid item more readable. Now let's add some content to each grid item.

htmlCopy code<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

In this example, we're simply adding a number to each grid item to indicate its position within the grid.

And that's it! We now have a fully functional CSS Grid layout. Here's what the final result looks like:

Conclusion

CSS Grid is a powerful tool for creating complex, two-dimensional layouts on your website. By using the grid container and grid item elements, along with the appropriate CSS properties, you can create flexible and intuitive layouts that make it easy for users to navigate your website. With CSS Grid, the possibilities are endless, and we hope this article has given you a solid foundation to get started with this powerful layout system.

iwritecodeCSSgrid