EDUCBA

Home Software Development Software Development Tutorials CSS Tutorial CSS Layout

CSS Layout

By Priya PedamkarPriya Pedamkar

css layout

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.

Various Layout Techniques

Given below are the various layout techniques:

  • Normal layout
  • CSS display property
  • Flexbox
  • Floats
  • Grid layout
  • Positioning elements
  • 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. 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.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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:

CSS Layout

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.

2. CSS Display Property

By default, CSS has a 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 see 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:

Display Property

3. 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.

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:

The Flex

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. 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.

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:

Grid

CSS Float Options

CSS Floating value modifies the behavior of an element that 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:

Float Options

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 with respective examples. You may also look at the following articles to learn more –

  1. CSS Font Properties
  2. CSS Table Styling
  3. CSS Position
  4. CSS Text Underline
0 Shares
Share
Tweet
Share
quiz