How can one achieve proper elements alignment on a web-page?

How can one achieve proper elements alignment on a web-page?


Elements Alignment is like the game of Chess. You need to concentrate.

Having a wonderful looking page is a great feeling, both to the application developer and the people using it. A lot of principles need to be considered to lay out all the components correctly on the page. Quite a challenging task. Some sections of a web page need to be aligned side by side (horizontally aligned) and others need to be kept vertically aligned. I would love elements aligned side by side on a desktop and maybe vertically on mobile. Of course, that may not be the best design. But sometimes content on a web page become too small when they resize due to a small screen. A reader needs to really focus to read the information. I would not love such a web page. I believe design principles need to consider ease of use of an Application. Ok, enough with the Introduction.

Let’s say one wants to design a website or a front end of some application, CSS is a great tool one can consider. Ok, wait a bit, what is CSS in the first place? Cascaded Styles Sheet (CSS) is a styling language used in describing the presentation of elements in a mark-up language like HTML. So basically, the HTML gives us a couple of elements. Some CSS styles need to be added to the HTML elements to have them looking prettier and aligned according to one’s desire. CSS has great properties to achieve this. These properties include the CSS flexboxes and CSS Grid. Yeah, you guessed it right, there are definitely other ways to achieve alignment of elements on a webpage using CSS, but this article will only focus on CSS Grid and Flexboxes.

Why CSS flexboxes and CSS Grid system?

Let’s start with Flexboxes. When the design requires alignment of elements in a single dimension, let’s say a row or column alignment, that can easily be achieved using flexboxes. One can still have elements aligned both vertically and horizontally in different containers on the same web page. Please note “Different containers”. That simply means one can only achieve a single-dimensional alignment in a container using CSS flexboxes. You cannot have both vertical and horizontal alignment in the same container using flexboxes. Some may consider this as a drawback but for certain designs, this will be a handy property to use.

Below is a description of CSS flexboxes in action.

.wrapper {
  width: 700px;
  display: flex;
  flex-wrap: wrap;
}
.wrapper > div {
  flex: 150px;
  border: 2px solid #833;
  background-color: orangered;
}

This illustration consists of seven child elements in a container. A display flex and flex-wrap wrap properties are added to the container. The container is also given a fixed width of 700px (pixels). Each child element is given a width of 150px. The elements will be aligned side until the space of the container becomes too narrow to maintain all the child elements. The next element will automatically move to the next row due to the wrap property on the parent container as in the image below.


CSS Flex in Action

One can notice that all three remaining elements are moved to the next row since the first row can only accommodate four elements. The three elements occupy all the space in the second row. It can be noticed that they are not vertically aligned if you compare the width of the elements in the upper row to that in the lower row. This is because each row is acting as a new flex container and the elements in the lower row will share the space in that row to cover the entire width in the lower row although they are only three in number.

Items not aligned vertically and horizontally at the same time! This may not solve some design problems of some web pages that require both horizontally and vertical alignment simultaneously. No worries, just sit back and relax. CSS got you covered. CSS provides the CSS Grid. The CSS grid implements a two-dimensional alignment. One can control both vertical and horizontal alignments at the same time using CSS Grid.

Wow! That seems great, but how? Let’s start with this example and hope it will make sense. This time let us assume we have the same container with seven child elements in it. This container is now provided with CSS properties of a display grid and a grid-column-columns of a repeat (4, 1fr) .

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
}
.wrapper > div {
  border: 2px solid #833;
  background-color: orangered;
}

There is no need to add any style to the child elements in the container. The container will simply create a grid of four columns, where each column will occupy 1 fraction of the total width of the container. The display grid will simply create a cell layout of the container and each element will be placed in a single cell.


CSS Grid in Action

As one can notice is that the elements stay in a strict grid system meaning they cannot expand to occupy the space in the last row as it was in the flexboxes.

So, I guess the question is that when can I use a grid or flexboxes?

child

In my opinion, one must consider the design requirement of the project. Flexboxes will complete the task if the design needs to control the layout by row or column and CSS Grid would be ideal if the design requires layout control both in row and column simultaneously.

Another ideal use of flexboxes is when one wants to space out elements in a container. You let the size of the content decide how much individual space each item takes up. If the elements wrap onto a new line, they will work out their spacing depending on their size and the available space on the new line. A principle sometimes referred to as content out principle.

The Grid system, on the other hand, works from the layout in principle. Let’s forget that complicated principle name first and we understand what that simply means. Let us say we create a CSS Grid layout and place elements in it, or you allow the auto-placement rules to place items into the Grid cells. It is possible to create cells (or tracks) that respond to the size of the content; however, they will also change the entire track.

If you have implemented flexboxes in laying out elements on your page but you also have to add a certain percentage to the flex items to align them with the upper row, in that case, the CSS Grid would be a better option. Yeah, you are reading the last line of this article now.

Summary

Thanks a lot for reading through my article and I hope the content was useful. Any likes and share of this article will be greatly appreciated.

Please check out more detailed information about CSS Grid and Flexboxes in the following links below.

Complete Guide to CSS-Grid

Guide to CSS Flex-boxes