Flexbox and CSS grid allows us to change the position of elements in our web pages. Creating multi-column layouts has always been frustrating and technologies such as floats, tables, positioning, and inline-block don’t cover vertical centering.

I will be talking about Flexbox and CSS Grid basics and when to use the different layouts.

Let’s dive in and find out which works best for you 😁

FlexBox.

Flexbox layout mode allows us to change the way our elements are displayed. It gives us total control over the alignment, direction, order, and size of our boxes. To use flexbox, we need to add display property.

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

The parent is the flex container while the children are the flex items. For the parent, we can add the following properties: flex-flow, justify-content, align-content, align-items. While for the children: order, flex, and align-self.

Creating flex container

<div class=”flex-container”>
   <div class=”item-1">item-1</div>
   <div class=”item-2">item-2</div>
   <div class=”item-3">item-3</div>
   <div class=”item-4">item-4</div>
</div>

Flex container

Understanding flex-direction

This CSS property sets how flex items are placed in the flex container. It accepts 4 different values:

  1. row (default): same as text direction
  2. row-reverse: opposite to text direction
  3. column: same as row but top to bottom
  4. column-reverse: same as row-reverse top to bottom
.flex-container {
   display: flex | inline-flex;
   flex-direction: row| row-reverse | column | column-reverse;
}

Flex-wrap

This property specifies whether the flex items should wrap or not. If the display: flex; is not added the property has no effect.

.flex-container {
   display: flex | inline-flex;
   flex-direction: row| row-reverse | column | column-reverse;
   flex-wrap: nowrap| wrap | wrap-reverse | initial | inherit ;
}
  • nowrap(default value): Specifies that the items will not wrap
  • wrap: specifies that the items will wrap if necessary
  • wrap-reverse: specifies that the items will wrap, if necessary, in reverse order
  • initial: sets this property to its default value
  • inherit: inherits the property from its parent element.

Positioning the elements across the cross axis

To position elements around the cross axis, you use the align-items property. It defines the behavior of flex items along the cross axis. This accepts 5 different values:

  • center: items are centered in the cross-axis
.flex-container {
   display: flex;
   flex-direction: row;
   align-items: center;
}

Align Items Center

  • flex-start: items are placed on the cross-start line
.flex-container {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
}

Align Items flex-start

  • flex-end: items are placed on the cross-end line
.flex-container {
   display: flex;
   flex-direction: row;
   align-items: flex-end;
}

Align Items flex-end

  • baseline: items are aligned such as their baselines align
  • stretch (default): stretch to fill the container (still respect min-width/max-width)

Positioning the elements across the Main axis

To position elements around the main axis, you use the justify-content property. It defines the behavior of flex items along the main axis. This accepts 5 different values:

  • flex-start (default): items are aligned toward the start line
.flex-container { 
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
}

Justify Content flex-start

  • center: items are centered along the line
.flex-container {
   display: flex;
   flex-direction: row;
   justify-content: center;
}

Justify Content center

  • space-between: items are evenly distributed in the line; the first item is on the start line, last item on the end line
.flex-container {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

Justify Content space-between

  • space-around: items are evenly distributed in the line with equal space around them
.flex-container {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
}

Justify Content space-around

  • space-evenly: items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same
.flex-container {
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
}
  • flex-end: items are packed toward to end line
.flex-container {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
}

Justify Content flex-end

CSS Grid

CSS Grid changes the way elements are displayed using rows and columns. To use a css grid, you need to add display property.

.container {
    display: grid;
}

Creating rows and columns

To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns: and grid-template-rows: The grid-template-columns accepts values in px, rems, the fraction(fr) and the percentage which specifies the number of columns.

.container {
   display: grid;
   grid-template-columns: 200px 150px 20% 1fr;
}

grid-template-columns

The grid-template-rows accepts the same value as the grid-template-columns. It defines the number of rows in a grid.

.container {
   display: grid;
   grid-template-columns: 200px 150px 20% 1fr;
   grid-template-rows: 5rem, 2.5rem;
}

grid-template-rows

Positioning Grid Items in a Grid

By default, every child of the container takes one cell. To override the positioning, you go to the child selector and define the position with grid-column-start, grid-column-end, grid-row-start, and grid-row-end.

.container {
   display: grid;
   grid-template-columns: 200px 150px 20% 1fr;
   grid-template-rows: 5rem, 2.5rem;
}
.elementThree {
   background: green;
   grid-column-start: 3;
   grid-column-end: 5;
   grid-row-start: 1;
   grid-row-end: 3;
}

Grid Positioning

Playing with Gaps

To create gutters between each column and rows, you use the property grid-column-gap and grid-row-gap. Grid-column-gap allows you to define gap between columns.

.container {
   display: grid;
   grid-template-columns: 200px 150px 20% 1fr;
   grid-template-rows: 5rem, 2.5rem;
   grid-column-gap: 20px;
}

Grid Column Gap

Grid-row-gap allows you to define the gap between rows

.container {
   display: grid;
   grid-template-columns: 200px 150px 20% 1fr;
   grid-template-rows: 5rem, 2.5rem;
   grid-row-gap: 20px;
}

Grid Row Gap

Shortcut to specify for both row and column is done by the property grid-gap which accepts two values, the first one for row and the second one for the column.

Comparing Grid and flexbox

The key difference between CSS grid and flexbox is that CSS grid is all about two-dimensional positioning (rows and columns) while flexbox is one-dimensional (flex-direction row or flex-direction column). If you just have a row or column, flexbox is the best alternative. The grid system is the best choice if you have a layout with multiple dimensions.

Browser Compatibility

Browser support for CSS flexbox

Browser support for CSS Grid

Thank you for reading. I would love to hear your opinion and don’t forget to clap If you enjoyed this.

References