Introduction to CSS layouts

Introduction

In CSS we can layout the page in several different ways. Laying out a page is very crucial when web designing is concerned. you can not always depend on the default way of organizing elements in HTML and CSS. The default behavior of CSS and HTML for placing elements onto the canvas of a web page is called the Box model. so let’s understand what this box model does and what other options do we have so that we can layout the page in a more flexible way.

Box Model in CSS

By default HTML elements, follows a boxed model arranged in Normal Flow. In Normal Flow, the HTML element appears sequentially as given in the HTML file.

In the box-model, we have two types,

CSS Flexible box Layout

Flexbox stands for flexible box model one of the layout techniques used in CSS for laying out HTML elements. It is a one-dimensional layout that means you can align elements either vertically or horizontally.

Flexbox has two axes on which elements can be placed. They are called the main-axis and cross-axis. The main-axis can be defined using the flex-direction property and the cross-axis adjust itself according to the main axis. Following diagram show flex-direction property for row and column accordingly. Default is set to row in Flexbox.

Fig. Main axis manipulation column adjusting accordingly.

There are a lot of other useful properties present in flexbox, which can be used to manipulate the HTML elements. Flexbox is useful when we need to only change the particular block where multiple elements need to follow the same design or order.

CSS Grid Layout

The collection of rows and columns is generally called a grid. In CSS Grid Layout is similar where we manipulate the element based on its location onto a grid.

To activate a grid layout we set the display property of a CSS to a grid similar to flexbox where we set the display property to flex. By assigning display a grid we make all the children of that element laid out in a grid. By default, we have one column in the grid hence, Immediately nothing will change everything may look like a box model. But now we can use all of the properties of a grid on a child elements.

There are a lot of properties we can use on the grid. In this blog, we’ll see the basic terms which help design the grid model.

fig. Grid layout with 1fr, 2fr and 3fr.

Conclusion

There are still lots of things we can do with the grid model and the flex model but it will require a blog of its own for each of these layouts. Following are the best resources where you can learn more about these layouts in depth. Please visit if you are more interested or require additional details on the topic.

references :

Software Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store