RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/css/comparison-between-css-grid-css-flexbox/ below:

Difference between CSS Grid and Flexbox

Last Updated : 29 Oct, 2024

CSS 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.

HTML


 <!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 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;

HTML


 <!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

Difference between CSS Grid and CSS Flexbox

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4