CSS Grid and flex box
Ashu SuhailCSS Grid arranges items in rows and columns (2-Dimension), while Flexbox aligns items in a single row or column (1-Dimension).
CSS Grid Layout
CSS Grid Layout, is a two-dimensional grid-based layout system with rows and columns. It makes easier to design web pages without having to use floats and positioning. Like tables, grid layout allow us to align elements into columns and rows.
To get started, you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.main{
display: grid;
grid: auto auto / auto auto auto auto;
grid-gap: 10px;
background-color: green;
padding: 10px;
}
.gfg {
background-color: rgb(255, 255, 255);
text-align: center;
padding: 25px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2 style="text-align: center;">
Welcome To GeeksForGeeks
</h2>
<div class="main">
<div class="gfg">Home</div>
<div class="gfg">Read</div>
<div class="gfg">Write</div>
<div class="gfg">About Us</div>
<div class="gfg">Contact Us</div>
<div class="gfg">Privacy Policy</div>
</div>
</body>
</html>
Output
CSS grid Property
It is a CSS property that offers a grid-based layout system, with rows and columns, making it easier to design web pages without floats and positioning.
Syntax :
Property values:
| Value | Description |
| none | It is default value no specific size mentioned for row and column. |
| grid-template-rows / grid-template-columns | It is used to specifies the size of rows and columns. |
| grid-template-areas | It is used to specifies the grid layout using named items. |
| grid-template-rows / grid-auto-columns | It is used to specifies the auto size(height) and sets the auto size columns. |
| grid-auto-rows / grid-template-columns | It is used to specifies the auto size and sets the auto grid size columns. |
| grid-template-rows / grid-auto-flow grid-auto-columns | It is used to specifies how to place items and auto size row and columns. |
| grid-auto-flow grid-auto-rows / grid-template-columns | It is used to specifies how to place items and auto size row and grid-template columns. |
Example 1: Grid with 2-rows and 4-column.
<!DOCTYPE html>
<html>
<head>
<title>
CSS | grid Property
</title>
<style>
.main {
display: grid;
grid: auto auto / auto auto auto auto;
grid-gap: 10px;
background-color: green;
padding: 10px;
}
.gfg {
background-color: lightgrey;
text-align: center;
padding: 25px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Welcome to GFG </h1>
<h3>This tutorial is on CSS grid property</h3>
<div class="main">
<div class="gfg">1</div>
<div class="gfg">2</div>
<div class="gfg">3</div>
<div class="gfg">4</div>
<div class="gfg">5</div>
<div class="gfg">6</div>
<div class="gfg">7</div>
<div class="gfg">8</div>
</div>
</body>
</html>
Output :
This can be used as a shorthand property for :
grid-template-rows : Specifies the size of the rows.
grid-template-columns : This specifies the size of the columns.
grid-template-areas : This specifies the grid layout using named items.
grid-auto-rows : This specifies the auto size of the rows.
grid-auto-columns : This specifies the auto size of the columns.
grid-auto-flow : This specifies how to place auto-placed items, and the auto size of the row.
Example 2: This is example for the grid-template-rows and grid-template-columns.
<!DOCTYPE html>
<html>
<head>
<title>
CSS | grid Property
</title>
<style>
.main {
display: grid;
grid-template-columns: 156px 156px 156px 156px;
grid-template-rows: 100px 200px;
grid-gap: 5px;
background-color: green;
padding: 5px;
}
.gfg {
background-color: lightgrey;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Welcome to GFG </h1>
<h3>This tutorial is on CSS grid property</h3>
<div class="main">
<div class="gfg">1</div>
<div class="gfg">2</div>
<div class="gfg">3</div>
<div class="gfg">4</div>
<div class="gfg">5</div>
<div class="gfg">6</div>
<div class="gfg">7</div>
<div class="gfg">8</div>
</div>
</body>
</html>
Output : Height of the first row is set to 100px and height of the second row is set to 200px and width of every column is set to 156px.
CSS Flexbox
The CSS Flexbox offers one-dimensional layout. It is helpful in allocating and aligning the space among items in a container (made of grids). It works with all kinds of display devices and screen sizes. To get started you have to define a container element as a grid with display: flex;
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.main{
display: flex;
grid: auto auto / auto auto auto auto;
grid-gap: 10px;
background-color: green;
padding: 10px;
}
.gfg {
background-color: rgb(255, 255, 255);
text-align: center;
padding: 25px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2 style="text-align: center;">
Welcome To GeeksForGeeks
</h2>
<div class="main">
<div class="gfg">Home</div>
<div class="gfg">Read</div>
<div class="gfg">Write</div>
<div class="gfg">About Us</div>
<div class="gfg">Contact Us</div>
<div class="gfg">Privacy Policy</div>
</div>
</body>
</html>
Output
Difference Between CSS Grid and Flexbox
| Property | Grid | Flexbox |
| Dimension | Two – Dimensional | One – Dimensional |
| Features | Can flex combination of items through space-occupying Features | Can push content element to extreme alignment |
| Support Type | Layout First | Content First |
| Primary Use Case | Creating complex layouts with rows and columns | Aligning items in a row or column |
| Performance | Can be less in performance due to very complex grids | Generally faster for simple layouts |
CSS Flexbox, short for the Flexible Box Layout module, is a powerful layout tool designed to simplify web page layouts by arranging items in rows or columns with ease.
Flexbox eliminates the need for floats or complex positioning, enabling responsive and dynamic layouts.
It aligns items efficiently, distributing space within a container, even when their sizes are dynamic or unknown.
Flexbox is supported in all modern browsers, making it a reliable choice for creating flexible designs.
What is CSS Flexbox?
The Flexible Box Layout module introduces a one-dimensional layout system that handles space distribution and item alignment effectively. It works seamlessly for horizontal (row) or vertical (column) arrangements, making it a go-to solution for responsive designs.
Key Features of CSS Flexbox
Alignment: Easily aligns items along the main axis (row/column) or cross-axis (perpendicular direction).
Space Distribution: Distributes space among items or gaps dynamically within a container.
Responsive Design: Adapts to screen sizes without extra effort, perfect for modern web layouts.
Subscribe to my newsletter
Read articles from Ashu Suhail directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by