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,
- Block box : A block contains elements such as h1, div, etc. Elements that are by default block box type takes up 100% width of their parent and height as per content stored in it.
- Inline Box : In inline HTML elements are placed side by side and takes only as much space as there contents in it. Examples of Inline HTML elements are span, br, etc.
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.
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.
- grid-template-rows/columns : This property is used to create new rows/columns with specific sizes.
- fr unit : The fr unit is used to flexibly give the size to a row and columns on a grid. Based on the parent’s size fr will distribute the space amongst the corresponding children. forex. If If grid template set to
grid-template-column: 1fr 2fr 3fr;and if the first column size is x then second will be 2x and 3rd will be 3x in size. And space will be distributed accordingly.
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 :
