Flexbox and CSS Grid are powerful CSS tools used to create responsive and efficient web layouts. While Flexbox is ideal for one-dimensional layouts (either rows or columns), CSS Grid excels at two-dimensional layouts (both rows and columns simultaneously). Below is a quick guide to help you get started with both.
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 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.
display: flex;
on this element.display: flex;
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.flex-direction: row | column | row-reverse | column-reverse;
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;
flex-direction
).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;
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;
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.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 is a two-dimensional layout system that allows you to create complex and responsive layouts with ease.
display: grid;
on this element.display: grid;
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.grid-template-columns: <column-widths> | auto;
<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;
<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>;
<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";
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.
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;
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.grid-column: <start> / <end> | span <number>;
<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>;
<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;
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;
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.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.
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.
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!