Oct 19, 2016Last modified April 26, 2025

Notes on grid and flexbox layout in css

Flexbox layout

Flexbox is a one dimentional layout model. You can control the alignments of the items along one axis.
The flexbox layout is directionally agnostic. You can use it to create layouts that work in both left-to-right and right-to-left languages.
Flexbox enables you to control layout at two levels - the flex container and the flex items.
The flex container is the element that contains the flex items.
- To turn any block element into a flex container, you set the display property to flex.
- You can decide how you want to render the contents of the container ie. either horizontally or vertically, using the flex-directon prioperty.
- You can also decide how you want to wrap the items if they don't fit in a single row or column, using the flex-wrap property.
- You can also decide how you want to align the items within the container, using the justify-content & align-items property.
- Here's sample example :
```
.container {
        display: flex;
        flex-direction: row; // or column
        flex-wrap: wrap; // or nowrap
        justify-content: center;   // or space-between, space-around, space-evenly
        align-items: center; // or flex-start, flex-end, stretch
    }
```
```
.container {
        display: flex;
        flex-direction: row; // or column
        flex-wrap: wrap; // or nowrap
        justify-content: center;   // or space-between, space-around, space-evenly
        align-items: center; // or flex-start, flex-end, stretch
    }
```
The flex items are the elements that are contained within the flex container.
- You can control the size of the items using the flex-grow, flex-shrink, and flex-basis properties.
- You can also control the order of the items using the order property.
- You can also control the alignment of the items within the container, using the align-self property.
- Here's sample example :
```
.item {
    flex-grow: 1; // or 0
    flex-shrink: 1; // or 0
    flex-basis: 100px; // or auto
    order: 0; // or any number
    align-self: center; // or flex-start, flex-end, stretch
}
```
```
.item {
    flex-grow: 1; // or 0
    flex-shrink: 1; // or 0
    flex-basis: 100px; // or auto
    order: 0; // or any number
    align-self: center; // or flex-start, flex-end, stretch
}
```

Implementing Holy-Grail layout with flexbox

<!DOCTYPE html>
<html>
  <style>
    body{
      display : flex;
      flex-direction: column;
      min-height: 100vh;
    }

    header{
      height: 50px;
      background-color: tomato;
    }

    footer{
      height: 50px;
      background-color: brown
    }

    .container{
      display: flex;
      padding: 10px;
      background-color: beige;
      flex: 1;
    }

    main{
      flex: 1;
      background-color: white;
    }

    nav{
      width: 100px;
      background-color: yellow;
    }

    aside{
      width: 100px;
      background-color: yellow;
    }
  </style>
  <body>
    <header>This is header</header>
    <div class="container">
      <nav>Keep all navigation here</nav>
      <main>This is main body</main>
      <aside>This is aside item</aside>
    </div>
    <footer>This is footer</footer>
  </body>
</html>

Open Sandbox

Grid layout

Grid layout is a two dimentional layout model. You can control the alignments of the items along both the axis.
Key Grid Properties:

For the Parent (grid container):

display: grid - Defines a grid container
grid-template-columns - Defines column sizes
grid-template-rows - Defines row sizes
grid-template-areas - Defines named grid areas
grid-gap - Spacing between grid cells
justify-items - Aligns items horizontally within their cell
align-items - Aligns items vertically within their cell

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-gap: 10px;
    justify-items: center;
    align-items: center;
}

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-gap: 10px;
    justify-items: center;
    align-items: center;
}

For the Children (grid items):

grid-column - Specifies which column(s) the item spans
grid-row - Specifies which row(s) the item spans
grid-area - Places an item in a named grid area

.item {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    // or shorthand -  grid-area: 1 / 1 / 3 / 3;
}

.item {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    // or shorthand -  grid-area: 1 / 1 / 3 / 3;
}

Implementing Holy-Grail layout with grid

<!DOCTYPE html>
<html>
  <style>
    body{
      height: 100vh;
      display: grid;
      grid-template-rows: auto 1fr auto;
      grid-template-columns: auto 1fr auto;
      grid-template-areas: "header header header" "nav main aside" "footer footer footer";
    }

    header{
      grid-area: header;
      height: 50px;
      background-color: tomato;
    }

    footer{
      grid-area: footer;
      height: 50px;
      background-color: brown
    }

    main{
      grid-area: main;
      background-color: white;
      padding: 10px;
    }

    nav{
      grid-area: nav;
      background-color: yellow;
      padding: 10px;
      max-width: 100px;
    }

    aside{
      grid-area: aside;
      background-color: yellow;
      padding: 10px;
      max-width: 100px;
    }
  </style>
  <body>
    <header>This is header</header>
    <nav>Keep all navigation here</nav>
    <main>This is main body</main>
    <aside>This is aside item</aside>
    <footer>This is footer</footer>
  </body>
</html>

Open Sandbox

When to Use Flexbox:

One-dimensional layouts (single row or column)
When you need to distribute space among items
When the exact positioning isn't as important
For smaller component layouts

When to Use Grid:

Two-dimensional layouts (rows and columns)
When you need precise control over placement
For complex layouts with overlapping elements
When designing the overall page structure