Overview of CSS Layout
CSS provides several layout options that allow us to control the position of HTML elements as compared to their default position that would appear in a normal layout. In this tutorial, we will be covering.
Various Layout Techniques
The following layout techniques:
- Normal layout
- CSS display property
- Flexbox
- Floats
- Grid layout
- Positioning elements
- The Table layout
- Multi-column layout
A single webpage may either contain only 1 layout from the above options or multiple layout options integrated and style together to achieve the required structure of the webpage.
1. The Normal flow in CSS
The Normal flow is the by default flow in which elements are displayed on a webpage according to their occurrence in the code and no layout control is defined or applied.
For example, let’s view the following code in the web browser:
Code:
<html>
<body>
<p>This is normal layout</p>
<ul>
<li>It uses default layout</li>
<li>No customizations applied</li>
<li>No layouts defined</li>
</ul>
<p>Everything is laid out as per it’s occurrence in the code</p>
</body>
</html>
Output:
As seen in the output, the items on the webpage are laid out as per their definition in the code file i.e the paragraph text is followed by the unordered list and the 2nd paragraph text. This type of flow where HTML elements are stacked one after the other is referred to as a blocked layout as compared to the inline layout where elements are rendered next to each other.
4.5 (4,071 ratings)
View Course
2. The CSS Display Property
By default, CSS has display property set to block wherein all elements appear in a sequence. However, the display property provides quite a few different options like inline, flex, grid, inline-block and so on. Each value that the block property can carry adds a different layout on the webpage.
Let’s now try the above example with a display value of all <li> elements set to inline instead of the default block. With this change, HTML code looks like:
Code:
<html>
<body>
<p>This is inline layout with display property</p>
<ul>
<li style = "display:inline">It uses inline layout</li>
<li style = "display:inline">We have used CSS display property</li>
<li style = "display:inline">A customized layout option to display option of unordered list next to each other</li>
</ul>
<p>All list elements now appear next to each other</p>
</body>
</html>
Output:
3. The Flex-Layout in CSS
The Flex or flexbox layout is used to make it easy for web designers to lay HTML elements out in one direction that is all elements are either laid out in a row or in a column. To use the flexbox layout, we can set flex value for the display property. When applied to the parent element, all its direct children elements then become flex items. We can understand this with the example below:
Code:
<html>
<body>
<p>This is inline layout with display property</p>
<ul style=”display:flex”> // setting display:flex here will align all li elements in row
<li >It uses inline layout</li>
<li >We have used CSS display property</li>
<li >A customized layout option to display option of unordered list next to each other</li>
</ul>
<p>All list elements now appear next to each other</p>
</body>
</html>
Output:
On setting display: flex to the parent div, all it’s child elements were aligned in a row since the default flex-direction is set to row.
4. The CSS Grid Layout
While flexbox layout is used for single dimensional layout, the CSS grid layout is used for two dimensions that are, lining elements up into rows and columns. We can use the Grid Layout with a value of display set to grid. The example below uses a similar structure of the flex example, but with a container as a parent element and some child elements. Also In addition to using the grid, we are defining some row and column parameters on the parent element using the grid-template-rows and grid-template-columns CSS properties.
Let’s understand this better with the below example:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
grid-gap: 10px;
}
.wrapper > div
{
Background : rgb(207,232,220);
}
</style>
</head>
<body>
<div class="wrapper">
<div >One</div>
<div >Two</div>
<div >Three</div>
<div >Four</div>
<div >Five</div>
<div >Six</div>
</div>
</body>
</html>
Output:
The CSS Float Options
The CSS Floating value modifies the behavior of an element follows a normal flow. The element is moved either to the left or to the right and is removed from the normal flow. It’s surrounding content then floats around the floated element.
The CSS Float property has four possible values listed as follows:
- Float left— It is used to float the element to the left.
- Float right— It is used to float the element to the right.
- Float none— It specifies no floating at all and is the default value.
- Float inherit— It specifies that the value of the float property should be inherited from the parent elements.
Let explore the float option with value left in details below:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
float: left;
width: 150px;
height: 150px;
margin-right: 30px;
Background : rgb(207,232,220);
}
</style>
</head>
<body>
<h1>This is a simple float to left example</h1>
<div class="box">Float</div>
<p> Lorem ipsum dolor sit amet. I am sure you must have seen Lorem Ipsum as a text on several websites. But have you wondered what it actually means? Lorem Ipsum is a dummy piece of text which is used for placeholder purpose in web pages. Lore Ipsum is originated from the Latin language and is a standardized placeholder used by web developers and designers all across the world. There are several Lorem ipsum generators available that help developer generate dummy text for several numbers of words.</p>
</body>
</html>
Output:
Conclusion – CSS Layout
As a summarization, we can conclude that CSS provides sufficient flexibility to combine various layout options together and achieve the desired structure especially with the help of the display, position and float properties of CSS.
Recommended Articles
This is a guide to CSS Layout. Here we discuss the overview, CSS Float Options, various layout techniques along respective examples. You may also look at the following articles to learn more-
