Skip to main content

CSS Flexbox and Grid

CSS Flexbox and Grid

To start, let's look at what CSS Flexbox and Grid are. Both of these are powerful layout models in CSS which allow for complex responsive web design layouts to be built more easily. Flexbox is designed for one-dimensional layouts, while Grid is designed for two-dimensional layouts.

CSS Flexbox​

CSS Flexbox, or the Flexible Box Module, aims to provide a more efficient way to layout, align and distribute space among items in a container, even when their size is unknown or dynamic.

To start using Flexbox, you need to set the display property of the container to flex or inline-flex.

.container {
  display: flex;
}

Flexbox Properties​

The main properties you'll use in Flexbox are:

  • flex-direction: Defines the direction items are placed in the container.
  • flex-wrap: Defines if items should wrap or not.
  • justify-content: Aligns items along the horizontal line if the flex direction is row, or vertical line if the flex direction is column.
  • align-items: Aligns items along the vertical line if the flex direction is row, or horizontal line if the flex direction is column.
  • align-content: Aligns lines along the vertical line if the flex direction is row, or horizontal line if the flex direction is column.

CSS Grid​

CSS Grid Layout, simply known as Grid, is a two-dimensional system that allows you to layout elements on a webpage along rows and columns.

To start using Grid, you need to set the display property of the container to grid or inline-grid.

.container {
  display: grid;
}

Grid Properties​

The main properties you'll use in Grid are:

  • grid-template-columns / grid-template-rows: Defines the columns/rows of the grid.
  • grid-column-start / grid-column-end / grid-row-start / grid-row-end: Determines a grid item’s location within the grid.
  • grid-column / grid-row: A shorthand for grid-column-start / grid-column-end and grid-row-start / grid-row-end, respectively.
  • grid-template-areas: Defines a grid template by referencing the names of the grid areas.
  • grid-gap: Defines the size of the grid lines.

Conclusion​

Both Flexbox and Grid are incredibly powerful tools for creating responsive layouts. Flexbox is great for one-dimensional layouts, while Grid is perfect for two-dimensional layouts. Understanding both of these tools will greatly improve your ability to create complex, responsive layouts in CSS.