What is CSS Grid Layout ?

Last Updated : 31 Jan, 2024

The CSS Grid Layout is a powerful two-dimensional layout system that allows you to design complex web layouts with rows and columns. It provides a more flexible and efficient way to create grid-based designs compared to traditional methods.

Note: An HTML element becomes a grid if that element sets display: grid; in style section or inline-grid.

Syntax

.class {
    display:grid;
}

Features

Two-Dimensional Layout: CSS Grid allows you to define both rows and columns, creating a grid structure.
Responsive Design: Makes it easy to create responsive layouts by defining flexible units like fr (fractional unit) and using media queries.
Alignment and Spacing: Provides properties for precise alignment (justify-items, align-items) and control over spacing between grid items (gap).
Grid Areas: You can name grid areas and place items into specific named areas.

P

pankaj_gupta_gfg

Improve

What is CSS Flexbox Layout ?

Similar Reads

How to create a Trello Layout with CSS Grid and Flexbox ?

Trello layout is used to organize or manage information in stages. It can be created using CSS Grid and Flexbox. Let's create the layout as shown in the below image. In the image, Trello Layout consists of Trello List which holds the items or information in it. Layout Structure: [caption width="800"]Trello layout[/caption] Example: To understand th

Holy Grail Layout with CSS Grid

The Holy Grail layout is a widely used web layout that consists of a header, footer, left sidebar, right sidebar, and main content area. This layout is expected to be responsive and adapt to different screen sizes. Despite the varying content lengths, the layout should maintain its structure and ensure the header and footer are always at the top an

How to Create a Responsive CSS Grid Layout ?

A grid layout is said to be responsive when fixed-sized grid items will shift position according to the viewport size. Responsiveness gives more professional look to the website. It is necessary to out perform your website design. we are going to learn how can we create a responsive CSS grid layout. These are the following approaches: Table of Cont

CSS Grid Layout Module

The CSS Grid Layout Module is a revolutionary tool in the realm of web development. It introduces a grid-based layout system, facilitated by rows and columns, that simplifies the design process of any webpage. This system eliminates the need for floats and positioning, making it a game-changer for developers. iframe { width: 100%; height: 330px;} @

CSS Grid Layout: The Fr Unit

The CSS Grid Layout module is used to create a grid-based layout system, with the help of rows and columns it makes easier to design any webpage without using floats and positioning. Syntax: .class { display:grid;}Note: An HTML element becomes a grid if that element sets display:grid grid-template-columns: This specifies the size of the columnsgrid

How to make a grid without calling CSS Grid property ?

In this article, we will see how to make a grid without calling CSS Grid property, along with understanding its implementation through the examples. It is essential to understand how CSS grid property works but what if we do not use the CSS grid property to make a grid. This is the generic question asked by the interviewer, which can give you a bet

Pure CSS Regular Grid vs Responsive Grid

Pure CSS is a free and open-source CSS framework. It is a collection of tools for creating online programs and responsive web pages. This was developed by Yahoo and is used to make websites that load faster, look better, and are easier to use. Bootstrap is effectively replaced by it. When developing Pure CSS, the responsive design was taken into ac

Bootstrap 5 Layout Form Grid

Bootstrap 5 Layout Form Grid is used to create a complex form using grid classes. The form grid layout required multiple columns of different widths and alignments. To create a form grid, we use .row and .col classes. Form Grid Layout used Classes: .row: This class is used to create a row of a form layout..col: This class is used to create columns

ReactJS MDBootstrap Grid System Layout

MDBootstrap is a Material Design and bootstrap-based react UI library that is used to make good-looking webpages with its seamless and easy-to-use component. In this article, we will know how to use Grid System Layout in ReactJS MDBootstrap. Grid System Layout is a great tool for creating layouts that are optimized for mobile devices. It's a powerf

Angular MDBootstrap Grid System Layout

MDBootstrap is a Material Design and bootstrap-based Angular UI library that is used to make good looking webpages with its seamless and easy-to-use component. In this article, we will know how to use Tooltips Component in Angular MDBootstap. Grid System Layout is a great tool for creating layouts that are optimized for mobile devices. Bootstrap’s

Article Tags :