CSS Flexbox and Grid: The Art of Building Responsive Layouts

Flex Flexible Layout

display: flex

Turn on Flex layout mode. Set an element as a Flex container, and its direct child elements will become Flex items.

.container {
    display: flex;
}

flex-direction

Defines the main axis direction (the direction of item arrangement). Optional values:

• row (default): horizontal, from left to right.
• row-reverse: horizontal, from right to left.
• column: vertical, from top to bottom.
• column-reverse: vertical, from bottom to top.

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap

Controls whether to wrap when there is not enough space in a row. Optional values:

• nowrap (default): no wrap, items may overflow the container.
• wrap: wrap, items are arranged in multiple rows.
• wrap-reverse: wrap, the first line is at the bottom, and the subsequent lines are arranged upwards.

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

justify-content

Defines the alignment on the main axis. Optional values:

• flex-start (default): items are aligned to the starting point.
• flex-end: items are aligned to the end point.
• center: items are aligned in the center.
• space-between: evenly distribute spacing between items, the first and last items are attached to the ends of the container respectively.
• space-around: evenly distribute spacing between items, the spacing on both sides of the items is equal.
• space-evenly: evenly distribute spacing between items, the spacing between items and the edge of the container and between items is equal.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

align-items

Defines the alignment on the cross axis. Optional values:

• stretch (default): Items stretch to fill the entire cross axis.
• flex-start: Items align to the start of the cross axis.
• flex-end: Items align to the end of the cross axis.
• center: Items are centered on the cross axis.
• baseline: Items are aligned by baseline.

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}

align-content

Only works in multi-line Flex layout (flex-wrap: wrap), defines the alignment of multi-line items on the cross axis. Optional values:

• stretch (default): Each row stretches to fill the entire cross axis.
• flex-start: Each row aligns to the start of the cross axis.
• flex-end: Each row aligns to the end of the cross axis.
• center: Each row aligns to the center of the cross axis.
• space-between: evenly distribute the space between each row, and the first and last rows are attached to the two ends of the container respectively.
• space-around: evenly distribute the space between each row, and the space on both sides of the row is equal.

.container {
    align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

order

Defines the order of items. The smaller the value, the higher the order. The default value is 0.

.item {
    order: <integer>;
}

flex-grow

Defines the enlargement ratio of the item. The default value is 0, which means no enlargement. If all items are set to non-zero values, the remaining space is distributed proportionally.

.item {
    flex-grow: <number>; /* Default is 0 */
}

flex-shrink

Defines the shrinkage ratio of the item. Defaults to 1, meaning it can shrink. If all items are set to non-zero values, they shrink proportionally to prevent overflowing the container.

.item {
    flex-shrink: <number>; /* defaults to 1 */
}

flex-basis

Defines the initial size of the item before the remaining space is distributed. Accepts length, percentage, auto (default), or content values.

.item {
    flex-basis: <length> | <percentage> | auto | content;
}

flex

Shorthand for flex-grow, flex-shrink, and flex-basis. Defaults to 0 1 auto.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
}

align-self

Overrides the container's align-items property to define the alignment of a single item on the cross axis. The optional values ​​are the same as align-items.

.item {
align-self: auto | stretch | flex-start | flex-end | center | baseline;
}

Grid Grid Layout

display: grid;

Turn on Grid layout mode. Set an element as a Grid container, and its direct children will become Grid items (cells).

.container {
display: grid;
}

grid-template-columns and grid-template-rows

Define the size of the grid's column and row tracks. Accepts length, percentage, fr (fraction unit, representing the fraction of the grid space) or auto values. You can also use the repeat() function to create repeated tracks, and the minmax() function to define the minimum and maximum size of the track.

.container {
    grid-template-columns: <track-size> ... | repeat(<number>, <track-size>) | auto-fill | auto-fit;
    grid-template-rows: <track-size> ... | repeat(<number>, <track-size>) | auto-fill | auto-fit;
}

/* Example */
.container {
    grid-template-columns: 1fr 2fr 1fr; /* Three columns, width ratio is 1:2:1 */
    grid-template-rows: 50px auto 1fr; /* Three rows, the first row is 50px, the second row is adaptive height, and the third row is the remaining space */
}

grid-template-areas

Define the area of ​​the grid layout by naming the item and describing the grid structure with a string. The item name uses . to represent a blank cell.

.container {
  grid-template-areas:
    "header header header"
    "nav main sidebar"
    "footer footer footer";
}

/* The corresponding items need to set the grid-area attribute */
.item1 {
  grid-area: header;
}
.item2 {
  grid-area: nav;
}
.item3 {
  grid-area: main;
}
.item4 {
  grid-area: sidebar;
}
.item5 {
  grid-area: footer;
}

grid-gap or grid-column-gap and grid-row-gap

Set the gap between items in the grid. Accepts length or percentage value.

.container {
    grid-gap: <grid-row-gap> <grid-column-gap>; /* Shorthand form, set both row and column gaps */
    grid-row-gap: <length> | <percentage>; /* Set row gaps separately */
    grid-column-gap: <length> | <percentage>; /* Set column gaps separately */
}

/* Example */
.container {
    grid-gap: 10px 20px; /* 10px row gap, 20px column gap */
}

grid-auto-columns and grid-auto-rows

Define the track size of newly added rows or columns when automatically filling the grid. Takes effect when the item exceeds the defined grid range.

.container {
grid-auto-columns: <track-size> ... | repeat(<number>, <track-size>);
grid-auto-rows: <track-size> ... | repeat(<number>, <track-size>);
}

/* Example */
.container {
    grid-auto-rows: minmax(100px, auto); /* The minimum height of the newly added row is 100px, and the maximum height is adaptive to the content */
}

grid-auto-flow

Controls how grid items are automatically filled and arranged. Optional values:

• row (default): fill by row.
• column: fill by column.
• dense: When row or column is used with dense, if there are gaps in the grid, new items will try to fill these gaps instead of just adding them to the end of the grid.

.container {
    grid-auto-flow: row | column | row dense | column dense;
}

grid-column-start, grid-column-end, grid-row-start, and grid-row-end

Manually specify the start and end positions of items in the grid.

.item {
    grid-column-start: <line-number> | <name> | auto;
    grid-column-end: <line-number> | <name> | span <number> | auto;
    grid-row-start: <line-number> | <name> | auto;
    grid-row-end: <line-number> | <name> | span <number> | auto;
}

/* Example */
.item {
    grid-column: 1 / 3; /* Equivalent to grid-column-start: 1; grid-column-end: 3;, occupying the first to third columns */
    grid-row: 2 / span 2; /* Equivalent to grid-row-start: 2; grid-row-end: span 2;, starting from the second row, spanning two rows */
}

grid-area

Shorthand property for setting grid-row-start, grid-column-start, grid-row-end, and grid-column-end at the same time, or referencing the area name defined in grid-template-areas.

.item {
    grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

/* Example */
.item {
    grid-area: header; /* Referencing the area name defined in grid-template-areas */
}

CSS Grid combined with Flexbox

In some cases, we can combine the advantages of CSS Grid and Flexbox to create more complex responsive layouts.

/* Container style */
.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Adaptive column width */
    grid-gap: 10px;
    padding: 10px;
}

/* Sub-element style */
.container > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

/* Responsive layout */
@media screen and (max-width: 768px) {
    .container {
        grid-template-columns: 1fr; /* Single column layout */
    }

    .container > div {
        height: 100%; /* Keep child element height */
    }
}

First, CSS Grid is used to create a grid layout with adaptive column width. Each grid item (child element) uses Flexbox inside to vertically center the content. When the screen width is less than 768px, the media query switches to a single column layout to adapt to mobile devices.

Flexbox vs. Grid selection

The choice of using Flexbox or Grid usually depends on specific needs:

• Flexbox is suitable for handling one-dimensional layouts, such as element arrangement in rows or columns, as well as element alignment and padding.
• CSS Grid is more suitable for handling two-dimensional layouts, such as tables or complex grid layouts, and precise cell control.