Grid Intro

Introduction

Grid Intro or simply CSS Grid is an efficient layout model available in CSS. It enables the developers to design complicated and echelon structures of the Web without complexities. Here in this article you are going to learn about CSS Grid from the background, why it is useful and how you can incorporate it into your project.

What is CSS Grid?

CSS Grid is a two dimensional layout model for the web. While Flexbox is one-dimensional where it can only work along a row or column while CSS Grid can work along both the row and column at the same time. Contributed by this capability, it is spectacular and accurate in designing layouts that are so complex and responsive.

Why Use CSS Grid?

Simplifies Complex Layouts

CSS Grid simplifies the creation of complex layouts that previously required a combination of various CSS properties and workarounds.

Enhanced Responsiveness

With CSS Grid, it’s easier to create responsive designs that adapt to different screen sizes and orientations.

Improved Readability

CSS Grid’s syntax and structure make the code more readable and maintainable, which is beneficial for collaborative projects and long-term maintenance.

Basic Concepts of CSS Grid

Grid Container

The element on which display: grid is applied. This element becomes a grid container and its children become grid items.

.container {
  display: grid;
}

Grid Items

The direct children of the grid container are called grid items.

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

Defining Columns and Rows

Columns and rows can be defined using the grid-template-columns and grid-template-rows properties.

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px;
}

This code creates a grid with three columns, each 200px wide, and two rows, each 100px tall.

Gap

The gap property is used to set the space between rows and columns.

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px;
  gap: 10px;
}

Placing Items on the Grid

You can place items on the grid by specifying their position using line numbers or named areas.

Using Line Numbers

Grid lines are the lines between grid tracks (rows or columns).

.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

This code positions item1 to span from the first to the third column line and from the first to the second row line.

Using Named Areas

You can define named grid areas and place items accordingly.

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

This approach provides a more semantic way to manage the layout.

Responsive Design with CSS Grid

CSS Grid makes it straightforward to create responsive designs. You can use media queries to adjust the grid layout based on the viewport size.

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}

In this example, when the viewport width is 600px or less, the grid will adjust to a single-column layout.

Conclusion

CSS Grid makes a huge difference to generation of current web developers providing them with the strong and adaptive layouts. Learning the basics and gradually trying the properties of CSS Grid, you will be able to effectively use it in your projects. Begin implementing CSS Grid to your designs now and witness how this tool helps in making layouts much easier to design.

Frequently Asked Questions