CSS Grid or Flexbox: Which Is Better for Creating Columns?

2 months ago

When it comes to CSS layouts, nan 2 main devices astatine your disposal are Grid and Flexbox. While some are awesome astatine creating layouts, they service different purposes and person different strengths and weaknesses.

Learn really some layout methods behave and erstwhile to usage 1 complete nan other.

The Different Behavior of CSS Flexbox and Grid

To thief visualize things, create an index.html record successful your preferred files and paste successful nan pursuing markup:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <h1>Flexbox vs Grid</h1>
    <h2>Flexbox:</h2>

    <div class="flex-container">
      <div>Lorem.</div>
      <div>Lorem ipsum dolor beryllium amet.</div>
      <div>Lorem ipsum dolor beryllium amet consectetur.</div>
      <div>Lorem ipsum dolor sit.</div>
      <div>Lorem ipsum dolor beryllium amet consectetur adipisicing elit.</div>
      <div>Lorem ipsum dolor beryllium amet.</div>
      <div>Lorem ipsum dolor beryllium amet consectetur.</div>
      <div>Lorem ipsum dolor sit.</div>
    </div>

    <div class="grid-container">
      <div>Lorem.</div>
      <div>Lorem ipsum dolor beryllium amet.</div>
      <div>Lorem ipsum dolor beryllium amet consectetur.</div>
      <div>Lorem ipsum dolor sit.</div>
      <div>Lorem ipsum dolor beryllium amet consectetur adipisicing elit.</div>
      <div>Lorem ipsum dolor beryllium amet.</div>
      <div>Lorem ipsum dolor beryllium amet consectetur.</div>
      <div>Lorem ipsum dolor sit.</div>
    </div>
  </body>
</html>

Both divs incorporate nan nonstop aforesaid children truthful you tin use a different strategy to each and comparison them.

You tin besides spot that nan HTML imports a style expanse record named style.css. Create this record successful nan aforesaid files arsenic index.html and paste nan pursuing styles successful it:

body {
padding: 30px;
}

h1 {
color: #A52A2A;
}

h2 {
font-size: large;
}

div:not([class]) {
outline: 2px solid black;
padding: 0.5em;
}

Your page should look for illustration this:

Now, to move nan first <div> into a flex column, simply adhd nan pursuing codification to your style sheet:

.flex-container {
display: flex;
}

This is nan result:

The flex-container div now lays retired its kid elements successful columns. These columns are elastic and responsive—they accommodate their width based connected nan abstraction disposable successful nan viewport. This behaviour is 1 of nan main basic concepts down Flexbox.

To forestall overflowing columns successful nan flex-container, you tin usage nan flex-wrap property:

.flex-container {
display: flex;
flex-wrap: wrap;
}

If location isn’t capable room for nan kid elements to fresh connected 1 line, they'll now wrap astir and proceed connected nan next.

Now use a Grid layout to nan 2nd <div> utilizing this CSS:

.grid-container {
display: grid;
}

Nothing will hap pinch nan supra declaration unsocial because nan default behaviour of Grid creates rows that stack connected apical of each other.

To move to a file display, you request to alteration nan grid-auto-flow spot (which is row by default):

.grid-container {
display: grid;
grid-auto-flow: column;
}

Now here's nan result:

To specify nan nonstop number of columns you want connected each line, usage grid-template-columns:

.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}

This worth creates 5 equal-width columns. To get a wrapping behaviour akin to Flexbox, you tin usage responsive properties for illustration auto-fit and min-max:

.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}

You’ll often perceive Flexbox and Grid referred to arsenic one-dimensional and two-dimensional, respectively. That's not nan afloat truth, however, because some Flexbox and Grid tin make a two-dimensional layout system. They conscionable do it successful different ways, pinch different constraints.

What's astir important is nan measurement that you tin power nan one-dimensional facet of nan layout. Consider nan pursuing image, for example:

Observe really accordant nan Grid file is and really uneven each file successful nan Flexbox is. Each row/column successful a flex instrumentality is independent of nan other. So immoderate mightiness beryllium bigger than others, depending connected nan size of their content. These are little for illustration columns and much for illustration independent blocks.

Grid useful differently, by mounting up a 2D grid pinch columns locked successful by default. A file pinch short matter will beryllium nan aforesaid size arsenic 1 pinch overmuch longer text, arsenic nan supra image demonstrates.

In summary, CSS Grid is simply a small spot much structured, while Flexbox is simply a much flexible and responsive layout system. These replacement layout systems are well-named!

When to Use Flexbox

Do you want to trust connected nan intrinsic sizing of each column/row, arsenic defined by their content? Or do you want to person system power from nan parent's perspective? If your reply is nan first, past Flexbox is nan cleanable solution for you.

To show this, see a horizontal navigation menu. Replace nan markup wrong nan <body> tags pinch this:

<h1>Flexbox vs. Grid</h1>

<header class="flex">
<h2>Flexbox</h2>

  <nav>
    <ul class="nav-list">
      <li><a href="">Home</a></li>
      <li><a href="">About Us</a></li>
      <li><a href="">Service Information Goes Here</a></li>
      <li><a href="">Blog Contact</a></li>
      <li><a href=""></a></li>
    </ul>
  </nav>
</header>

Replace nan markup successful nan CSS record pinch this:

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

header {
  --border-width: 5px;
  border: var(--border-width) solid black;
  margin-bottom: 30px;
}

header > *:first-child {
border: var(--border-width) solid #FFC0CB;
margin: 0;
}

li {
border: var(--border-width) solid #90EE90;
}

Here's nan result:

Now, toggle shape nan first navigation into a flex layout and nan 2nd into a grid layout by adding nan pursuing CSS:

.flex .nav-list {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}

.grid .nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

Compare nan results to spot which was much suitable:

From nan supra image, you tin spot that Flexbox is nan cleanable solution successful this case. You person items that you want to spell adjacent to each different and support their intrinsic sizing (big aliases mini depending connected nan matter length). With Grid, each compartment has a fixed width, and it doesn't look arsenic good—with plain matter links, astatine least.

When to Use CSS Grid

One spot that Grid really excels is erstwhile you want to create a rigid strategy from nan parent. An illustration is simply a group of paper elements that should beryllium arsenic wide, moreover if they incorporate different amounts of content.

Replace nan markup wrong nan <body> tags pinch this:

<h1>Flexbox vs. Grids</h1>

<section class="cards">
<h2>Some cards</h2>

  <div class="columns">
    <article class="card">
      <h3 class="card__title">Fun Stuff</h3>
      <p>Lorem ipsum, dolor beryllium amet consectetur adipisicing elit.</p>

      <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Excavate</li>
      </ul>
    </article>

    <article class="card">
      <h3 class="card__title">Fun Stuff</h3>
      <p>Lorem ipsum dolor beryllium amet, consectetur adipisicing elit.</p>

      <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Excavate</li>
      </ul>
    </article>

<article class="card">
<h3 class="card__title">A Longer Title Than Others</h3>

      <p>Lorem ipsum, dolor beryllium amet consectetur adipisicing elit. Facere
         excepturi beryllium ea dolores totam veniam qui voluptates commodi,
         perferendis et!</p>

      <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Excavate</li>
      </ul>
    </article>
  </div>
</section>

Add this CSS:

.columns {
display: flex;
gap: 1em;
}

article {
  background-color: #90EE90;
  color: black;
  padding: 15px;
}

ul {
  background-color: white;
  padding: 2px;
  list-style: none;
}

You're starting pinch a Flexbox show to spot really it looks, truthful you tin comparison it to nan grid display. Here's nan output:

Notice really nan past file is bigger than others because of its intrinsic sizing, which is what Flexbox handles well. But to make them nan aforesaid width utilizing Flexbox, you would person to spell against that intrinsic sizing by adding nan following:

.columns > * {
flex: 1;
}

This does nan trick. But Grid is amended suited for cases for illustration this. You conscionable specify nan number of columns, and you're bully to go:

.columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1em;
}

Here's nan result:

Another advantage of utilizing Grid is that nan genitor is controlling nan layout of nan children. So you tin adhd and region kid elements without worrying astir breaking nan layout.

So When Should You Use Grid aliases Flexbox?

In summary, CSS Grid is awesome erstwhile you want a system power from nan parent's perspective, pinch an adjacent size of columns sloppy of nan size of its individual contents.

Flexbox, connected nan different hand, is perfect erstwhile you want a much elastic strategy based connected nan intrinsic sizing of elements.

Source Tutorials