CSS Layout – Grid vs. Flexbox

CSS Layout – Grid vs. Flexbox

A good layout keeps visitors on a page because it makes important things easily accessible and intuitive to find. A nasty layout frustrated can frustrate page visitors and makes them leave the site because they can’t find what they’re looking for.

In Web design, the layout is a term that explains how a Web site is displayed on the screen. HTML 5 has several elements that define parts of a Web page: header, nav, section, pagearticle, and footer are the main distinguishing features when creating a layout. They form the four main sections of a web page – header/banner, navigationcontent, and footer.

Programming languages make websites appear alive, but at the heart of every web page is the good old HTML. When discussing layouts, we need to consider factors that make a good layout. This includes responsiveness, display ports, display devices, browsers, and the screen size of page visitors. A good layout not only looks beautiful but can also preserve the original intent by matching any display ratio. This correction is generated by CSS. In this article, we will examine two powerful features: CSS Flexbox and CSS Grid.

Main parts of the web page – HTML5
Main parts of the web page – HTML5

What is the CSS Flexbox layout?

The Flexible Box module, usually abbreviated to ‘Flexbox’, is a one-dimensional layout model. This means that it handles either row or column at once, but never both together. Flexbox is efficient when it comes to aligning, distributing, and directing elements on one side.

Two key terms in Flexbox are the main axis and the transverse axis. The main axis of a flexible vessel is the main axis along which these flexible elements are arranged, and the transverse axis is perverse to it.

In the beginning, we will package our HTML dives into a flex wrapper.

<div class="wrapper">
  <div id="first">Header</div>
  <div id="second">Nav</div>
  <div id="third">Content</div>  
  <div id="fourth">Footer</div>
</div>

In CSS, our parent container, ‘Wrapper’ is converted to a Flexbox with a simple line of code.

.wrapper { 
  display: flex; 
} 

We’ll add some elements and properties with bright colors and edges to highlight our containers and dives.

.wrapper{ 
  display: flex; 
  background-color: #262626; 
} 
.wrapper > div { 
  background-color: #ffae00; 
  height: 100px; 
  width: 100px; 
  margin: 10px; 
} 

You can see how beautifully the div elements position themselves horizontally. But when you notice that it doesn’t quite occupy all the space inside the container. There is a gap at the end. We can change that by adding Flex-Grow.

.wrapper > div { 
  flex-grow: 1; 
}

The Flex Grow element distributes each item in a flexible container. The default value is 0, and by assigning a unit number to one of the dives, you can grow it more massively than the rest. The opposite is Flex-Shrink.

#first{ 
  flex-grow: 10;
} 

Flex Direction

Flex-direction controls the direction in which objects in a Flex container should point. You can let the divs go up, down, left, and right. You can also have the dives in reverse order. By default, the objects in a flex container are arranged from left to right, horizontally, within the main axis.

.wrapper{ 
  display: flex; 
  flex-direction: row; /* default direction */ 
}
.wrapper{ 
  display: flex; 
  flex-direction: row-reverse;  
}

Here the objects are displayed from left to right but in reverse order. The fourth Div will now be the first and the first – the last.

.wrapper{ 
  display: flex; 
  flex-direction: column; 
} 

The dives are arranged vertically – from top to bottom.

.wrapper{ 
  display: flex; 
  flex-direction: column-reverse; 
}

The dives are arranged vertically, but in reverse order, with the fourth div at the top and the first at the bottom.

Flex Base

The Flex base defines the size of an item or container in the Flex container. This size value can be specified in em, px, or percent. Flex-Base differs from Flex-Grow because it does not evenly divide the space between the objects in a container.

#third { 
  flex-basis: 200px; 
}

Flex

Flex is a short-handed property that incorporates Flex-Shrink, Flex-Grow, and Flex-Basis. It is recommended that you use this property instead of writing each property and its value. The order in which the values for the property are set is flex-grow, flex-shrink, and flex-base.

.wrapper { 
  display: flex; 
  flex: 0 0 200px; 
} 

Justify Content and Align Items

Justify-content and align-self is the perfect solution to centralize a div or container on a browser with a flexbox.

.wrapper { 
  display: flex; 
  flex: 0 0 200px; 
  justify-content: center; 
  align-items: center; 
} 

CSS Layout Grid

CSS Grid is a powerful 2-dimensional layout. This means that it can handle both the rows and the columns of the layout. CSS Grid works with a 12-grid arrangement where the screen (invisible) is divided into 12 parts, and items must fit into that arrangement. The advantage of CSS Grid over flexbox and other layout models is two-dimensionality.

It also makes positioning easier, and the container’s elements can be arranged to overlap each other.

Define A Grid in the CSS Grid

A simple CSS line turns an HTML structure into a CSS grid.

<div class="container"> 
  <div id="first">Header</div> 
  <div id="second">Nav</div> 
  <div id="third">Content</div>  
  <div id="fourth">Aside</div>   
  <div id="fifth">Section</div>  
  <div id="sixth">Footer</div> 
</div> 
.container { 
  display: grid; 
} 

Grid-template-columns and Grid-template-rows

The grid-template-columns and grid-template-rows define the size of a column or row. You assign a size to a Div, depending on what is assigned. If you set the size of a template column and the size of the template grid, you use px, fr, percentage, or em.

.container { 
  display: grid; 
  grid-template-columns:  40px 1fr 20%;  
  grid-template-rows: 200px; 
  background-color: #262626;   
}
.container > div { 
  background-color: #ffae00; 
  margin: 10px; 
} 

Grid-template-columns: 40px 1fr 20 percent; – this code line tells the browser to allocate a width of 40px to the first div. The second takes up a fraction of the allocated space and the third 20%. Automatically, the dives 4 to 6 move into the top 3 and accept the assigned values in the same order. This means that Div 4 40px, Div 5 is assigned a fraction and Div 6, 20%. To set all six dives to one row, we need to assign six values to the grid template column.

We don’t give the grid columns different dimensions. We could only use percentages, fr, or px. grid-template-rows: 200px;

– this assigns a height of 200px to all divs;

FRI

.container { 
  display: grid; 
  grid-template-columns: 16.7% 16.7% 16.7% 16.7% 16.7% 16.7%;  
} 

By distributing 16.7% over 6 seats, we have successfully split the six dives in the container into six equal parts on the screen. We used 16.7 because 16.7 by 6 gives 100% of the screen width.

The use of percentage and px works perfectly, but it lacks sufficient flexibility and surpasses the most useful resource – a fraction of the CSS grid. 

Fr is a broken unit. It allocates a fraction of the available space to each item. The broken space can be enlarged to accommodate each div, depending on how much space it needs.

Our grid template columns are now.

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 

This splits each div evenly on the screen.

grid-template-columns: 1fr 2fr 1fr 2fr 1fr 1fr; 

This new value makes the second and fourth dives twice as large as the rest. Most importantly, it is still evenly distributed in the browser and reacts very well.

Repeat Function

Instead of repeatedly writing down the values, we can use the retry function to assign values once.

.container { 
  display: grid; 
  grid-template-columns: repeat(6, 1fr);
}

The syntax is relatively simple. We need to use the word ‘repeat’ and then assign how many times we want to repeat the size, i.e. 6, and then specify the metric. This retry function works with both fr, em, px, and percent. This also works for template-row.

GAP

Gap, also known as Gutter, is a CSS Grid property that allows you to set the distance between divs in a CSS Grid container. It works exactly like the margin property and is mainly calculated in px.

gap: 10px;

Grid-column-start / Grid-column-end and Grid-row-start / Grid-row-end

The grid-column-start and grid-column-end place an object of the grid at a specific location within the column by referring to specific grid lines. The grid-row-start and grid-row-end do the same with the line. By assigning a value to this property, items of the grid can be conveniently manipulated to begin and end within the specified ranges.

.container { 
  display: grid; 
  grid-template-columns: repeat (3, 1fr); 
  grid-template-rows: repeat(4, 200px); 
}
#first { 
  grid-column-start: 1; 
  grid-column-end: 3; 
  grid-row-start: 1; 
  grid-row-end: 4; 
}

If you assign these values to the first div, you will notice that it pushes the second div further away by one unit, and it takes the first two positions and pushes div 3 below. In series, it now occupies three positions, which gives it a higher height.

There is a rule when indexing in programming because we generally count from 0, which is true here. The last value is usually mentioned, but not enacted. For example, the grid-column-end is 3, but it stops at 2, just like the grid-column-end, which ends at 3 and not 4.

Grid-columns and Grid-row

Grid-column is a short form for specifying grid-column-start and grid-column-endGrid-row is a concise way to set a grid-row-start and a grid-row-end.

Here, a slash separates the raster column start value from the raster column end value. This also applies to the line.

#first { 
  grid-column: 1/3; 
  grid-row: 1/4; 
}

Create Galleries With CSS Grid

The CSS Grid is the ideal model for building galleries. With little code and manipulation, you can create perfect, engaging gallery layouts.

A mosaic gallery layout

A mosaic gallery layout creates uniform tiles of images that are evenly distributed across a page/container.

<div class="container"> 
  <div id="one">one</div> 
  <div id="two">tow</div> 
  <div id="three">three</div>  
  <div id="four">four</div>   
  <div id="five">five</div>  
  <div id="six">six</div> 
  <div id="seven">seven</div> 
  <div id="eight">eight</div> 
  <div id="nine">nine</div> 
</div>
.container{ 
  display: grid; 
  grid-template-columns: repeat(3, 1fr);  
  grid-template-rows: repeat(3, 200px); 
  background-color: #262626; 
  gap: 10px 
}
.container > div { 
  background-color: #ffae00; 
}

See the Pen A mosaic gallery layout by itechonics (@itechonics) on CodePen.

This creates a perfectly tiled mosaic picture gallery layout.

A masonry gallery layout

This layout is uneven because it does not have a fixed row height. With the help of grid-columns and grid-rows, we can adjust the images to fit over assigned fractions of units and move as we want.

.container { 
  display: grid; 
  grid-template-columns:  repeat(3, 1fr);  
  grid-template-rows: repeat(5, 200px); 
  background-color: #262626; 
  gap: 10px; 
}
.container > div { 
  background-color: #ffae00; 
}
#one { 
  grid-column: 1/3; 
  grid-row: 1/4; 
} 
#two { 
 grid-row: 1/3; 
}  
#five { 
  grid-column: 4/2; 
}   
#seven { 
  grid-row: 6/1; 
}

See the Pen A masonry gallery layout by itechonics (@itechonics) on CodePen.

Grid Template Area

Grid-template-area assigns a name to a Div/Element so that the Grid Area property can reference it. It works just like grid-column and grid-row and allows us to map and accommodate certain areas with ease within the structure of the grid.

<div class="container">
  <div id="one">Header</div> 
  <div id="two">Nav</div> 
  <div id="three">Aside</div>  
  <div id="four">Content</div>   
  <div id="five">Section</div>  
  <div id="six">Footer</div>
</div>
.container { 
  display: grid; 
  grid-template-columns:  repeat(3, 1fr);  
  grid-template-rows: repeat(2,100px); 
  background-color: #262626; 
  gap: 10px; 
  grid-template-areas: 'header header header' 
                       'nav nav nav' 
                       'aside content content' 
                       'aside section section' 
                       'footer footer footer'; 
}
.container > div { 
  background-color: #ffae00; 
  font-size: 25px; 
}   
#one { 
  grid-area: header; 
} 
#two { 
 grid-area: nav; 
}
#three { 
  grid-area: aside; 
}     
#four { 
  grid-area: content; 
} 
#five { 
  grid-area: section; 
}    
#six { 
  grid-area: footer; 
}

See the Pen Grid template area by itechonics (@itechonics) on CodePen.

Grid Areas

Reference to the areas mentioned must be made in the order in which they were called. For example, the Grid Area for #first cannot be a footer, as this is the latter Grid Area. Failure to follow the order will result in a design error.

CSS Flexbox vs. Grid – What should I use?

In short, Grid is a container-based layout, while Flexbox is content-based. Both CSS Grid and Flexbox are powerful in their own way. However, CSS Grid offers more features and makes it easier to manipulate rows and columns within the grid. Before you decide, you should understand the complexity, structure, and content of the page you are to create. Here is a more detailed comparison: In the Flexbox layout, the size of a cell (flex item) is defined within the Flex item itself, and the grid layout defines the size of a cell (grid item) within the grid container.

However, we would advise you to use CSS Grid for the overall layout of the page and then Flexbox for the items in the container. CSS Grid also works perfectly for individual items, and it takes into account nuances within the actual grid structure better than Flexbox. For example, the areas of the grid template will map the structure of the page in a few seconds. This allows you to focus on aligning the content as you see fit.

Comments

Write a Reply or Comment

Your email address will not be published. Required fields are marked *


This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.