Before diving into the Flexbox and CSS Grid examples, try out this interactive demo by W3Schools: W3Schools Display Property Demo. You can select various properties like display, flex, grid, and more to see how different values affect the layout. This is a great way to visualize the concepts you’ll be learning in this tutorial.

Flexbox

Flexbox is a one-dimensional layout method that makes it easier to design a flexible and responsive layout structure. It aligns items along a single axis, either horizontally or vertically.

Basic Concepts

• Container: The parent element that holds the flex items. Set display: flex; on this element.
• Items: The children of the flex container.

Key Properties for the Flex Container:

• display: flex;

  • Purpose: Defines the element as a flex container, enabling Flexbox layout.
  • Options: flex or inline-flex (if the container should behave as an inline element). Note: inline-flex is similar to flex, but it makes the flex container behave like an inline element rather than a block element. This property is used when you want a flex container to be part of the flow of text or inline elements. For instance, you might use inline-flex inside a paragraph to align items without breaking the text flow. While not as common as flex, inline-flex is helpful when you need more control over the alignment and spacing of inline elements.
  • Meaning: When set, this property turns the container into a flex container, affecting its direct children (flex items) with Flexbox properties.

• flex-direction: row | column | row-reverse | column-reverse;

  • Purpose: Specifies the direction in which the flex items are placed in the flex container.
  • Options:
    
    • row (default): Items are placed in a horizontal row, from left to right.
    • column: Items are placed in a vertical column, from top to bottom.
    • row-reverse: Items are placed in a horizontal row but in reverse order (right to left).
    • column-reverse: Items are placed in a vertical column but in reverse order (bottom to top).

• justify-content: flex-start | center | space-between | space-around | space-evenly;

  • Purpose: Aligns flex items along the main axis (the direction specified by flex-direction).
  • Options:
    
    • flex-start (default): Items are aligned at the start of the container.
    • center: Items are centered along the main axis.
    • space-between: Items are distributed with equal space between them, with no space at the start or end.
    • space-around: Items are distributed with equal space around them, including the start and end.
    • space-evenly: Items are distributed with equal space between and around them.

• align-items: flex-start | center | baseline | stretch | flex-end;

  • Purpose: Aligns flex items along the cross axis (perpendicular to the main axis).
  • Options:
    
    • flex-start: Items are aligned at the start of the cross axis.
    • center: Items are aligned at the center of the cross axis.
    • baseline: Items are aligned along their baseline.
    • stretch (default): Items stretch to fill the container along the cross axis.
    • flex-end: Items are aligned at the end of the cross axis.

• align-content: flex-start | center | space-between | space-around | stretch;

  • Purpose: Aligns flex lines within the flex container (if there are multiple lines of flex items).
  • Options:
    
    • flex-start: Lines are packed at the start of the container.
    • center: Lines are packed at the center of the container.
    • space-between: Lines are distributed with equal space between them.
    • space-around: Lines are distributed with equal space around them.
    • stretch (default): Lines stretch to fill the available space.

Flexbox Example

Explore how the Flexbox container (.container) arranges its child elements (.item) horizontally across the page. Notice the spacing between items achieved using justify-content: space-between, and how the items are vertically centered within the container using align-items: center.

CSS Grid

CSS Grid is a two-dimensional layout system that allows you to create complex and responsive layouts with ease.

Basic Concepts

• Grid Container: The parent element that contains the grid items. Set display: grid; on this element.
• Grid Items: The children of the grid container.

Key Properties for the Grid Container:

• display: grid;

  • Purpose: Defines the element as a grid container, enabling CSS Grid layout.
  • Options: grid or inline-grid (if the container should behave as an inline element). Note: inline-grid is similar to grid, but it makes the grid container behave like an inline element rather than a block element. This property is used when you want a grid container to be part of the flow of text or inline elements. For instance, you might use inline-grid inside a paragraph to align items without breaking the text flow. While not as common as grid, inline-grid is helpful when you need more control over the alignment and spacing of inline elements.
  • Meaning: When set, this property turns the container into a grid container, affecting its direct children (grid items) with Grid properties.

• grid-template-columns: <column-widths> | auto;

  • Purpose: Defines the number and width of columns in the grid.
  • Options:
    
    • <column-widths>: A list of sizes, separated by spaces, that determine the number and widths of the columns. For example, 100px 200px 1fr creates three columns: the first is 100px wide, the second is 200px wide, and the third takes up the remaining space.
    • repeat() function: You can use repeat() to repeat column sizes. For example, repeat(3, 1fr) creates three columns of equal width.
    • auto: The size of columns is automatically determined based on content.

• grid-template-rows: <row-heights> | auto;

  • Purpose: Defines the number and height of rows in the grid.
  • Options:
    
    • <row-heights>: A list of sizes, separated by spaces, that determine the number and heights of the rows. For example, 100px 200px 1fr creates three rows: the first is 100px tall, the second is 200px tall, and the third takes up the remaining space.
    • repeat() function: You can use repeat() to repeat row sizes. For example, repeat(2, 1fr) creates two rows of equal height.
    • auto: The size of rows is automatically determined based on content.

• gap: <row-gap> <column-gap> | <gap>;

  • Purpose: Defines the spacing between rows and columns in the grid.
  • Options:
    
    • <row-gap>: Specifies the gap between rows.
    • <column-gap>: Specifies the gap between columns.
    • <gap> (or gap alone): Specifies both row and column gaps. For example, 10px sets a 10px gap between both rows and columns.

• grid-template-areas: "area1 area2" "area3 area4";

  • Purpose: Defines named areas in the grid layout, making it easier to position grid items using these names.
  • Explanation: Each set of quotes represents a row in the grid, and each value within the quotes represents a column. For example:
    

    grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";

    CSS

  In this example, the grid has three rows and two columns. The first row has two columns, both labeled header. The second row has sidebar in the first column and content in the second. The third row has footer spanning both columns.

  • Note: While grid-template-areas defines the layout, it takes priority only if grid-template-rows and grid-template-columns are not explicitly set.

• grid-auto-flow: row | column | dense;

  • Purpose: Controls the auto-placement algorithm for grid items that are not explicitly placed.
  • Options:
    
    • row (default): Items are placed in rows first.
    • column: Items are placed in columns first.
    • dense: Items are placed in the first available space, even if it means skipping over some of the defined grid areas.

Key Properties for the Grid Items:

• grid-column: <start> / <end> | span <number>;

  • Purpose: Defines the starting and ending positions of a grid item within the columns.
  • Options:
    
    • <start> and <end>: Grid lines that the item should span between. For example, 1 / 3 makes the item start at column line 1 and end at column line 3.
    • span <number>: Specifies the number of columns the item should span. For example, span 2 makes the item span two columns. As another example, grid-column: 1 / span 2 starts the item at column line 1 and makes it span two columns.

• grid-row: <start> / <end> | span <number>;

  • Purpose: Defines the starting and ending positions of a grid item within the rows.
  • Options:
    
    • <start> and <end>: Grid lines that the item should span between. For example, 1 / 3 makes the item start at row line 1 and end at row line 3.
    • span <number>: Specifies the number of rows the item should span. For example, span 2 makes the item span two rows.

• align-self: start | end | center | stretch;

  • Purpose: Aligns a grid item along the row axis (cross axis).
  • Options:
    
    • start: Aligns the item at the start of the row axis.
    • end: Aligns the item at the end of the row axis.
    • center: Aligns the item in the center of the row axis.
    • stretch (default): Stretches the item to fill the available space along the row axis.

• justify-self: start | end | center | stretch;

  • Purpose: Aligns a grid item along the column axis (main axis).
  • Options:
    
    • start: Aligns the item at the start of the column axis.
    • end: Aligns the item at the end of the column axis.
    • center: Aligns the item in the center of the column axis.
    • stretch (default): Stretches the item to fill the available space along the column axis.

CSS Grid Example

Explore the CSS Grid layout by examining how the .grid-container organizes the .grid-item elements into a 3x2 grid. Notice how the second item spans two columns and two rows, creating a larger cell within the grid.

When to Use Flexbox vs. CSS Grid

• Flexbox: Best for simple layouts with a focus on content flow along a single axis (row or column). Great for navigation bars, flex containers within a grid, or when aligning items horizontally or vertically.

• CSS Grid: Best for complex layouts that require control over both rows and columns simultaneously. Ideal for creating the overall page structure, card layouts, or when you need precise placement of items.

Final Thoughts

Mastering Flexbox and CSS Grid gives you the tools to create any layout you can imagine, from simple navigation bars to complex grid systems. Start with Flexbox for simpler, one-dimensional tasks, and turn to CSS Grid when you need a full-fledged layout solution. Happy coding!