Getting started: CSS Grid vs Flexbox

CSS Grid and Flexbox are essential tools to make your websites responsive. In this blog I will introduce you to each, state how they differ, and go into how to implement each one.

CSS Grid is a CSS layout method developed for two-dimensional layouts. It can manage both columns and rows.

On the other hand, Flexbox is a one-dimensional layout model. It can only handle rows or columns, not both. Flexbox focuses on content whereas Grid’s main focus is layout. Flexbox, gives a container the ability to alter its items’ width, height, and order to fit the available space within the container.

One big advantage of CSS Grid is that you can use Flexbox within it. For example, you can have a main container with a Flex navigation bar inside.

Getting started with Grid — Setting up the Container

You must set your container to have display:grid

.container{
  display:grid
}

After this initial step, it’s time to define the column and row sizes.

You can do this using grid-template-columns and grid-template rows. You can specify the size of each column and row. If you do not, it is assigned an auto size. Grid also allows for the use of fractions using “fr” or percentages.

.container { 
   grid-template-columns: 50px auto 30px 20px 40px; 
   grid-template-rows: 25px 1fr 100px ; 
}

Getting started with Grid — Setting up the content/child elements

When you use grid, float, display: inline-block, display: table-cell, vertical-align and column-* properties have no effect on the grid items.

Instead, to manipulate these elements we will use: grid-column-start, grid-column-end, grid-row-start, and grid-row-end. You can give these items names as well.

Here you can also specify values such as span to determine how many columns or rows an item will span. Additionally, both the container and the elements within it can use justify to align content. You can justify items by start, end, center, or stretch. Depending on your layout needs, you can also use align-content. Justify aligns items along the inline row axis while Align uses the block, column axis.

.box-1 {
   grid-column-start: 1; 
   grid-column-end: three; 
   grid-row-start: row2-start;
   grid-row-end: 4; 
}
OR
grid-column: 3 / span 2; //spans 2 columns starting at 3

Getting started with Flexbox — Setting up the container

Flexbox has a shorter learning curve and less set up as well. To start let’s get started by setting the display to flex.

.container{
  display:flex;
}

Next, it’s time to choose a flex direction. It can be: row (left to right), row-reverse (right to left), column (top to bottom), or column-reverse (bottom to top).

.container{
  flex-direction:row;
}

Like CSS Grid, Flexbox also allows content justification. You can choose from the options below.

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

To allow your flex row or column to be more flexible you can allow wrapping. When using flexbox the items will try to remain inline, but for responsiveness you can edit that by adjusting the wrap property by choosing nowrap (default), wrap, or wrap-reverse.

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

Getting started with Flexbox — Setting up the content/child elements

When using Flexbox, it’s important to note that float, clear and vertical-align have no effect. To affect position, we can assign order to each of our child elements. This will change which element appears first, second etc. See below for an example.

.child-element {
   order: <integer>; 
}

The child elements are also able to be aligned. You can choose from auto, flex-start, flex-end, center, baseline, or stretch.

The child elements can be given special properties that allow them to shrink or grow in size depending on the available space: Flex-grow, Flex-shrink, or Flex-basis.

Flex-grow: This property determines the amount of the available space inside the flex container the item should take up proportional to the other child elements in the container. Same idea for Flex-shrink.

Flex-basis: This property sets the default size of an element before the remaining space is distributed.

.child-element {
   flex-grow: <number>;
}
.child-element {
   flex-shrink: <number>;
}
.child-element {
   flex-basis: <length> | auto;
}

Now that you are all caught up, you can play around with all these settings to find the best option for your project. Happy coding!