CSS Layout

Harsh Goyal
Last Updated: May 13, 2022

Introduction-  

In this blog, we will discuss CSS Layout and various ways to use it in HTML. 

Imagine working as a frontend engineer, and a client gives a design for a new website. 

The design has interesting layouts and compositions: 

  • Two-dimensional layouts are considerate of viewport height and width.
  • Fluid and Flexible Layouts.

How do we decide the best way to style these with CSS?

CSS layout helps us in multiple ways to solve layout problems on a horizontal and vertical axis. Choosing the right layout method is a hard problem, and often we may need more than one layout method to solve our problem. In this blog, we will discuss various CSS layout mechanisms to solve these kinds of issues.

 

CSS  layout techniques help us to take elements contained in control and web page where they're positioned relative to the following factors: 

  •  Their default position in normal layout flow.
  •  The other elements around them.
  •  Their parent container.
  •  Main viewport/window.

 

Normal Flow -

By Default, Normal flow is how the browser renders HTML pages when we haven’t applied anything to control page layout. HTML is generated in the same order in which it appears in the code, with elements present on top of one another.

Block elements are the elements that appear one below the other, and Inline elements are the elements which appear beside one another, just like the individual words in a paragraph. Block direction is the direction in which block elements are rendered. The Block Direction runs vertically in English.

HTML Solution -

<p>Normal Flow</p>

 

<ul>

  <li>c</li>

  <li>c++</li>

  <li>java</li>

</ul>

 

<p>End!</p>

 

 

Output -

    

If we notice in the above output, we will find that HTML is displayed in the same order in which it appears in the source code with elements stacked on top of one another means the first paragraph followed by the unordered list followed by the second paragraph.

In some cases, the normal flow will help us create exactly the CSS layout. However, we will need to change this default behavior using tools available in CSS for complex CSS layouts. To begin with, a well-structured HTML document is essential so that we can work with the way things are laid out by default.

Let’s discuss these methods that help us to change the layout -

Display Property -

Display property does two things -

Firstly, it determines if the box it is applied to is Inline or Block. Inline elements act like words in a sentence and are placed next to each other in the inline direction. Elements like <span> and <strong> which are typically used to style pieces of text containing elements like a <p> are inline by default. They also preserve surrounding whitespace. We can't set an explicit width and height on inline elements.

In the case of block elements, they don't place alongside each other. Instead, they create a new line for themselves. Usually, Block elements expand to the size of the inline dimension hence spanning the complete width in a horizontal writing mode. 

Secondly, Display Property determines how an element's children should behave. For instance, setting the display property to display: flex makes a block-level box and converts its children to flex items. This enables the flex properties that control ordering, alignment and flow.

 

.my-element {

display: inline;

}

 

.my-element {

display: block;

}

 

.my-element {

display: flex;

}

 

 

Flexbox -

Flexbox is a layout mechanism for 1D CSS layouts: horizontal layout or vertical layout. Flexbox aligns the element's children next to each other in the inline direction and stretches them in the block direction, hence they're all the same height.

 

Below is the Syntax -

 

.my-element {

display: flex;

}

 

 

Below is an example using flexbox. Items stay on the same axis and will not overlap when they run out of space and they will try to squash onto the same line. 

 

HTML Solution -

 

 

<main class="wrapper">

  <div class="my-element">

    <div class="box">Coding Ninjas</div>

    <div class="box">This is sample text.</div>

  </div>

</main>

 

 

 

.my-element {

display: flex;

}

 

 

OUTPUT

Grid-

Grid is similar to flexbox, but it is designed to control multi-axis layouts instead of 1D layouts. Grid facilitates us to write layout rules on an element with a display grid and introduces a few new primitives for layout styling like repeat() and minmax() functions. 

 

Below is the Syntax -

 

.my-element {

display: grid;

}

 

 

 

One example of a grid is the fr unit which is a fraction of the remaining space.

we can build traditional 12 column grids, with a gap between each item, with 3 CSS properties:

 

.my-element {

  display: grid;

  grid-template-columns: repeat(12, 1fr);

  gap: 1rem;

}

 

 

HTML Solution -

<main>

  <div class="wrapper flow">

    <article class="flow">

      <h1>Coding Ninjas</h1>

      <figure class="callout">

        <p>Each of the items share 1 of 8 portions of the remaining space equally            between each item.</p>

      </figure>

      <div class="my-element">

        <div class="box">c</div>

        <div class="box">c++</div>

        <div class="box">java</div>

        <div class="box">javascript</div>

        <div class="box">c#</div>

        <div class="box">Reactjs</div>

        <div class="box">Nodejs</div>

        <div class="box">TypeScript</div>

      </div>

    </article>

  </div>

</main>

 

 

 

.my-element {

  display: grid;

  grid-template-columns: repeat(12, 1fr);

  gap: 1rem;

}

 

 

OUTPUT

Flow Layout-

If we are not using a grid or flexbox, our elements will display in normal flow. There are a number of layout methods that we can use to adjust the behavior and position of items in normal flow.

Inline Block -

Inline-block can help us provide the margin and padding properties to the inline elements. 

Below is the Syntax -

p span {

display: inline-block;

}

 

 

Inline-block gives us a box with characteristics of a block-level element, but it still flows inline with the text.

 

p span {

margin-top: 0.5rem;

}

 

 

HTML Solution -

<div>

  <span>This text</span> <span>is normal span, that is <code>display: inline</code> by default</span>.

<p>This <span>span text</span>, inside a paragraph element is <code>display: inline-block</code>, so its top margin will no longer be ignored. 

</div>

 

 

 

p span {

display: inline-block;

}

 

span {

  margin-top: 0.5rem;

  outline: 1px solid var(--color-stroke);

}

 

 

OUTPUT

Floats -

With Float, if we have an image within a paragraph of text, we can have text wrap around that image as we might see in a newspaper. The float property in CSS instructs an element to "float" to the direction specified, and we can instruct an element in CSS to float left, right, or inherit.

 

Below is the Syntax of Floats -

img {

float: left;

margin-right: 1em;

}

 

 

HTML Solution -

<article>

  <img src="https://static.startuptalky.com/2020/06/coding-ninjas-logo.jpg" alt="Coding Ninjas logo" />

  <p>This image floats left, which means these text wrap around it.</p>

  <p>This is Float Layout Example.</p>

</article>

 

 

 

img {

  width: 150px;

  height: 150px;

  float: left;

}

 

article {

  display: flow-root;

}

 

img {

  margin-inline-end: 1em;

}

 

p + p {

  margin-top: 1em;

}

 

 

OUTPUT

Multi-Column Layout-

With a Multi-Column Layout, we can split a long list into multiple columns. If we don’t use it, it will result in a lot of scrolling and time waste for the end-user. It can also create excess whitespace on the page. Instead of setting the number of columns that the content is split into, we can also define a minimum desired width using column width. As more space is made available in the viewport, more columns will automatically be created, and as space is reduced, columns will also decrease. This is very useful in responsive web design contexts.

 

Below is the Syntax of Floats -

.my-element {

column-count: 2;

column-gap: 1em;

}

 

 

HTML Solution -

<ul class="languages">

  <li>c</li>

  <li>c++</li>

  <li>java</li>

  <li>c#</li>

  <li>Javascript</li>

  <li>Typescript</li>

  

</ul>

 

 

 

CSS Snippet

 

.languages {

  column-count: 2;

  column-gap: 1em;

}

 

 

OUTPUT

 

Positioning -

In normal flow, the way an element behaves and relates to other elements is decided by position property. Different positions can be relative, absolute, fixed, and sticky, with the default value being static. Adding 'position: relative' to an element also makes it the containing block of any child elements with 'position: absolute'. Hence its child will now be positioned to this particular element, instead of the topmost relative parent, when it has a definite position applied to it.

 

Below is the Syntax of Floats -

.my-element {

  position: relative;

  top: 20px;

}

 

 

In the above case, this element is nudged 20px down based on its current position in the document as it is positioned relative to itself. 

If the position is set to absolute, it breaks the element out of the current document flow. It means two things:

  • We can position this element wherever we like using top, right, left, and bottom in its nearest relative parent.
  • All of the content surrounding an absolute element reflows to fill the remaining space left by that element.

 

An element with a position value of fixed behaves similarly to absolute. Fixed-position elements stay anchored from the top left based on the left, right, top, and bottom values.

HTML Solution -

<main>

      <div class="wrapper">

        <article class="flow">

          <h1>CSS Position Property</h1>

          <div class="parent">

            <p>Coding Ninjas</p>

            <div class="box">Relative Text position</div>

            <p>This is Relative Position Example</p>

          </div>

        </article>

      </div>

 </main>

 

.parent {

  padding: 0.5rem 2rem 2rem;

  height: 1000px;

  position: relative;

  background: var(--color-primary-x-light);

  border: 1px solid var(--color-primary);

}

 

.box {

  top: 1.5rem;

  left: 1.5rem;

}

 

.parent p {

  margin: 1em 0;

}

 

 

OUTPUT

 

Frequently asked questions-

 

1) What is Normal Flow?

Normal flow is how the browser renders HTML pages when we do nothing to control page layout. HTML is rendered in the same order in which it appears in the code, with elements present on top of one another. The elements that appear below the other are block elements, and the elements that appear beside one another, like the individual words in a paragraph, are inline elements. 

2) What is the need for CSS Layout?

In some cases, the normal flow will help us create exactly the layout. However, for complex layouts, we will need to change this default behavior which can not be achieved by normal flow, so in those cases, we need to take the help of CSS layout.

 

3) What are things that need to be taken care of while using floats?

When we use float, keep in mind that any elements following the floated element may adjust their layout. To avoid this, we can clear the float by using clear: both on a component that follows our floated element or display: flow-root on the parent of floated elements.

Key takeaways-

In this article, we discussed what CSS Layouts are and why we need them. We discussed how we could use them along with HTML to deal with complex CSS layouts. Learn more about CSS on CodingNinjas.

 

If you think that this blog helped you, then share it with your friends!.

 

Until then, All the best for your future endeavors, and Keep Coding.




 

By Harsh Goyal

 

 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think