Say Goodbye to Layout Hassles: A Guide to CSS Grid and Flexbox

Sumukha SurebanSumukha Sureban
4 min read

Creating a layout and arranging elements on a web page can be quite challenging, and it becomes even more difficult when a client requests a responsive web application. Fortunately, CSS offers Flexbox and Grid to help solve this problem.

Flexbox

Flexbox is a layout model which helps in arranging the components in rows and columns. Just like a graph has a X-axis and Y-axis the flexbox layout has a Main Axis and Cross Axis.

Basic Syntax

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style>
        .container {
            border: 2px solid black;
        }

        .item {
            border: 2px solid red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

OUTPUT

Now what if I add the flexbox

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style>
        .container {
            border: 2px solid black;
            height: 300px;
            display:flex;
        }

        .item {
            border: 2px solid red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

Here, we have changed the direction of block-level elements from a column layout to a row layout. Now we can align the items however its required.

.container {
    border: 2px solid black;
    height: 300px;
    display:flex;
    justify-content: center; /*Aligning the element to center through main-axis*/
    align-items: center; /*Aligning the element to center through cross-axis*/
}

Now lets discuss the most important properties of the Flexbox.

Flexbox container properties

a. display

  • Values: flex, inline-flex

  • Enables Flexbox on the container.

b. flex-direction

  • Values: row, row-reverse, column, column-reverse

  • Defines the direction of the main axis (horizontal or vertical).

c. justify-content

  • Values: flex-start, flex-end, center, space-between, space-around, space-evenly

  • Aligns items along the main axis (horizontal alignment for row).

d. align-items

  • Values: stretch (default), flex-start, flex-end, center, baseline

  • Aligns items along the cross axis (vertical alignment for row).

e. align-content

  • Values: stretch (default), flex-start, flex-end, center, space-between, space-around

  • Aligns multiple rows (only applies when flex-wrap is set).

f. flex-wrap

  • Values: nowrap (default), wrap, wrap-reverse

  • Controls whether items wrap to the next line or stay in a single line.

g. gap

  • Specifies spacing between flex items (rows and columns).

  • Example: gap: 10px;

Flexbox item properties

a. flex (Shorthand for three properties)

  • flex-grow, flex-shrink, and flex-basis can be combined.

  • Example: flex: 1 1 auto;

b. flex-grow

  • Defines how much an item should grow relative to others.

  • Default: 0 (do not grow).

c. flex-shrink

  • Defines how much an item should shrink relative to others.

  • Default: 1 (shrink if needed).

d. flex-basis

  • Specifies the initial size of a flex item before space distribution.

  • Example: flex-basis: 200px;

e. align-self

  • Values: auto (default), flex-start, flex-end, center, baseline, stretch

  • Allows individual items to override the align-items property.

f. order

  • Specifies the order of items (default: 0).

  • Example: Items with order: 1 appear after those with order: 0.

Grids

CSS Grid Layout is a powerful tool for creating two-dimensional layouts on the web. Unlike Flexbox, which mainly handles one dimension (either row or column), Grid lets you work with both rows and columns at the same time, making it perfect for complex layouts.

Key Features of CSS Grid

  1. Two-Dimensional Layouts:

    • Grid handles rows and columns together, allowing for precise control over layout structure.

  2. Explicit and Implicit Grids:

    • Explicit Grid: Defined by specifying the rows and columns in the container.

    • Implicit Grid: Automatically created by Grid when items overflow the defined structure.

  3. Responsive Design:

    • Grid simplifies the creation of responsive layouts without the need for media queries in many cases.

Key Properties of CSS Grid

1. Container Properties (Applied to Parent)

  • display: grid or inline-grid:

    • Enables the grid layout.

    • grid is block-level; inline-grid is inline-level.

  • grid-template-rows / grid-template-columns:

    • Defines the structure of rows and columns.

    •   grid-template-columns: 100px 1fr 2fr;
  grid-template-rows: 50px auto 200px;

  • grid-gap / row-gap / column-gap:

    • Adds spacing between rows and/or columns.

    •   grid-gap: 10px;

grid-template-areas:

  • Creates named grid areas for easier layout organization

    •   grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";

    • justify-items:

      • Aligns items horizontally within their grid cells.

      • Values: start, end, center, stretch.

    • align-items:

      • Aligns items vertically within their grid cells.

      • Values: start, end, center, stretch.

    • place-items (Shorthand):

      • Combines justify-items and align-items.

    • justify-content / align-content:

      • Controls alignment of the entire grid within the container.

2. Item Properties (Applied to Children)

  • grid-column / grid-row:

    • Specifies where an item starts and how many columns/rows it spans.

    •   grid-column: 1 / 3; /* Spans from column 1 to 3 */

    • grid-area:

      • Assigns an item to a named grid area (defined in grid-template-areas).

      • align-self / justify-self:

        • Aligns an individual grid item within its cell.

Conclusion

CSS Grid simplifies creating responsive, two-dimensional layouts with precise control over rows and columns. It's perfect for modern web design, enabling dynamic, adaptable structures. Master its properties, combine it with Flexbox, and elevate your layouts to the next level!

0
Subscribe to my newsletter

Read articles from Sumukha Sureban directly inside your inbox. Subscribe to the newsletter, and don't miss out.

ChaiCodeChaiaurcodeChaiCohortWeb DevelopmentCSSflexboxBeginner Developerscoding

Written by

Sumukha Sureban
Sumukha Sureban

Hi, I'm Sumukha Sureban, a post-graduate student in Computer Applications. Throughout my academic journey, I've developed skills in web development, cybersecurity fundamentals, and machine learning. I've also had the opportunity to build and deploy web applications using the MERN stack, while delivering solutions to clients. I am eager to learn new technologies and implement them for real world applications for enhancement of people lives.