CSS Flexbox and Grid

6 min readMar 1, 2021

CSS Flexbox

CSS flexbox layout allows you to easily format HTML. Flexbox makes it simple to align items vertically and horizontally using rows and columns. Items will “flex” to different sizes to fill the space. It makes responsive design easier.

Terminology

Before you learn what the flexbox properties do, it’s important to understand the associated terminology -

main-axis: The main axis of a flex container is the primary axis along which flex items are laid out. The direction is based on the flex-direction property.
main-start | main-end: The flex items are placed within the container starting on the main-start side and going toward the main-end side.
main size: The width or height of a flex container or flex item, whichever is in the main dimension, is that box’s main size. Its main size property is thus either its width or height property, whichever is in the main dimension.
cross axis: The axis perpendicular to the main axis is called the cross axis. Its direction depends on the main axis direction.
cross-start | cross-end: Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.
cross size: The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension.

CSS Flexbox properties

Here is a list of CSS flexbox properties that can be used to position elements in CSS. Next, you’ll see how they work.

CSS that can be applied to the container

display: flexbox | inline-flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

CSS that can be applied to items/elements in the container

order: <integer>;
flex-grow: <number>; /* default 0 */
flex-shrink: <number>; /* default 1 */
flex-basis: <length> | auto; /* default auto */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;

CSS Display Flex

display: flex is tells your browser, "I wanna use flexbox with this container, please."

A div element defaults to display:block. An element with this display setting takes up the full width of the line it is on.

.container {
  display: flex |inline-flex 
}

Flex-direction

This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.

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

Justify-content

This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

Align item

Determines the default for how flex items get placed on the cross axis on each line.

Align-content

Determines the default for how cross axis lines are aligned.

Align-self

Determines how a single item is placed along the cross axis. This overrides any defaults set by align-items.

Order

Places elements in groups and determines which order they are to be placed in within the container.

Flex-flow

Shorthands flex-direction and flex-wrap to place the flex content.

CSS Grid

CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that element’s children (which become Grid Items).

CSS Grid properties

Here is a list of CSS grid properties that can be used to position elements in CSS. Next, you’ll see how they work.

display: grid | inline-grid;
grid-template-columns:  ... |   ...;
grid-template-rows:  ... |   ...;
grid-template-areas: " | . | none | ..."| "...";
grid-template: none | <grid-template-rows> / <grid-template-columns>;
column-gap: <line-size>;
row-gap: <line-size>;space-around;
gap: <grid-row-gap> <grid-column-gap>;
justify-items: start | end | center | stretch; space-around | stretch;
align-items: start | end | center | stretch;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
grid-auto-flow: row | column | row dense | column dense;
grid-column-start: <number> | <name> | span <number> | span <name> | auto;
grid-column-end: <number> | <name> | span <number> | span <name> | auto;
grid-row-start: <number> | <name> | span <number> | span <name> | auto;
grid-row-end: <number> | <name> | span <number> | span <name> | auto;

display

Defines the element as a grid container and establishes a new grid formatting context for its contents.

.container {
  display: grid | inline-grid;
}

grid-template-columns grid-template-rows

Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line.

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

justify-items

Aligns grid items along the inline (row) axis (as opposed to align-items which aligns along the block (column) axis). This value applies to all grid items inside the container.

.container {
  justify-items: start;
}

align-items

Aligns grid items along the block (column) axis (as opposed to justify-items which aligns along the inline (row) axis). This value applies to all grid items inside the container.

.container {
  align-items: center;
}

Conclusion

Flexbox and CSS Grid both allow a powerful measure of control over their respective domains of front-end development. However, their capabilities are exponentiated when they are combined, utilizing their respective strengths to create an extremely fluid, customizable, beautiful, smooth, and simple experience.