CSS Layouts : A comprehensive guide for developers 🔥
Tags: css, layouts, tutorial, frontend
Published: 2023-08-04 14:26:30

Creating a visually appealing and responsive website layout is a cornerstone of web development. With the ever-growing range of devices and screen sizes, mastering CSS layout techniques is crucial for delivering a seamless user experience. In this article, we will delve into the key concepts and best practices for creating robust and flexible layouts using CSS.

Let's get started🚀

There are **3 ways of building layouts with CSS**, and they are:

1. **[Float Layouts](#float-layouts)**
2. **[Flexbox](#flexbox)**
3. **[CSS Grid](#grid)**

## Float Layouts <a name="float-layouts"></a>


![Illustration showing how float property works](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8i6ovjxietocx8h677d2.png)

Layouts using the float property in CSS involve positioning elements horizontally within a container. It can contain values left or right.

**Syntax :**

```
.box1{
  height:30vh;
  width:30vw;
  background-color:red;
  float:right;
}
```
{% codepen https://codepen.io/Mohiyaddeen-raza/pen/GRwzaRV %}

In the above codepen, we have created 2 boxes and floated box1 to the right, and by doing this, it also allows other elements to float to the left side of it. This is because floated elements are taken out of the normal document flow, and the content that follows will wrap around the floated element.

**For more info on float property visit :** [https://developer.mozilla.org/en-US/docs/Web/CSS/float](https://developer.mozilla.org/en-US/docs/Web/CSS/float)

If you want to prevent this wrapping behavior and ensure that certain elements do not float beside the floated element, you can use the **"clear"** property.

**Syntax :**

```
.box1{
  height:30vh;
  width:30vw;
  background-color:red;
  float:right;
}
.box2{
  clear:right;
  height:30vh;
  width:30vw;
  background-color:red;
}
```
{% codepen https://codepen.io/Mohiyaddeen-raza/pen/PoxVvKZ %}

In the above codepen, we have applied the "clear" property to box 2, and by doing this, we have achieved a box on whose right side no elements can be floated.

**For more info on clear property visit :** [https://developer.mozilla.org/en-US/docs/Web/CSS/clear](https://developer.mozilla.org/en-US/docs/Web/CSS/clear)

**NOTE : Initially intended for simple text wrapping around images, float gained popularity as a layout tool. However, its behavior can be challenging to control, leading to unexpected results in complex layouts. It has limitations in creating modern, responsive, and complex layouts.**

---
## Flexbox <a name="flexbox"></a>


![Illustration of flexbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9uqvk4u255ragtpb17z1.png)

With Flexbox, we can easily create complex arrangements of elements in a single direction (either horizontally or vertically). **By defining a parent container as a flex container, you gain precise control over the alignment, distribution, and spacing of child elements.** This approach eliminates the need for float-based layouts and intricate positioning, making it an essential tool for crafting component layouts.

**Syntax :**

```
.flex-container{
  display:flex;
}
```

**Flex properties for parent (flex container) are:**


1. **[flex-direction](#flex-direction)**
2. **[flex-wrap](#flex-wrap)**
3. **[justify-content](#justify-content)**
4. **[align-items](#align-items)**
5. **[align-content](#align-content)**

**flex-direction :** <a name="flex-direction"></a>
It is used to define the direction in which the items are laid out. The values for this property can be row, row-reverse, column, or column-reverse. By default, the value for flex-direction is "row".

**Syntax :**

```
.container{
  display:flex;
  flex-direction:column;
}
```

{% codepen https://codepen.io/Mohiyaddeen-raza/pen/LYXaRKB %}

**For more information on flex-direction property visit :** [https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)

**flex-wrap :** <a name="flex-wrap"></a>

The flex-wrap property defines whether the flex items should wrap or not. The values for this property can be wrap, no-wrap, or wrap-reverse.

**Syntax :**

```
.container{
  display:flex;
  flex-wrap:wrap;
}
```
{% codesandbox xhw4d6 %}

**Exercise : For the above codebox, try changing the orientation by sliding from left to right.**

**For more info on flex-direction property visit :** [https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)

**justify-content :** <a name="justify-content"></a>

It is used to define flex items along the **main axis.** The values for this property can be flex-start, flex-end, center, space-between, space-around, and space-evenly.

**Syntax :**

```
.container{
  display:flex;
  justify-content:center;
}
```
{% codepen https://codepen.io/Mohiyaddeen-raza/pen/mdQoOPZ %}

In the above codepen we have created a simple NAVBAR using flex and justify-content.


![Illustration of justify-content property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lexwx8747vov3zgr5u6s.png)

**For more information on justify-content property visit :** [https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)

**align-items :** <a name="align-items"></a>

It is used to define flex items along the **cross axis.** The values for this property can be flex-start, flex-end, center, stretch, etc.

**Syntax :**

```
.container{
  display:flex;
  align-items:center;
}
```
{% codepen https://codepen.io/Mohiyaddeen-raza/pen/XWyGNGy %}

In the above codepen we have centered the flex-items along the cross axis using the align-items property.

**For more information on align-items property visit :**[https://developer.mozilla.org/en-US/docs/Web/CSS/align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)

**align-content :** <a name="align-content"></a>

It is used to align the flex container's lines when there is extra space on the cross axis. The values for this property can be flex-start, flex-end, center, stretch, space-between, space-around, and space-evenly.

**Syntax : **

```
.container{
  display:flex;
  align-content:center;
}
```
{% codepen https://codepen.io/Mohiyaddeen-raza/pen/wvQOoLd %}

In the above codepen try clearing the align-content property.

**For more information on align-content property visit :**[https://developer.mozilla.org/en-US/docs/Web/CSS/align-content](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)

**Flex properties for flex items (children) are:**

1. **[order](#order)**
2. **[align-self](#align-self)**
3. **[flex-grow](#flex-grow)**
4. **[flex-shrink](#flex-shrink)**

**order :** <a name="order"></a>

It is used to specify the order of flex items. By default, the order of all flex items is 0.

**Example :** If there are 3 flex items in a flex container and we apply the order property to only 1 item, it will float to the end as the other two items have order 0, therefore the other item whose order is 1 will float to the end.

**Syntax :**

```
.item1{
  order: 2;
}
```
{% codepen https://codepen.io/Mohiyaddeen-raza/pen/vYQPxXR %}

**For more information on order property visit :**[https://developer.mozilla.org/en-US/docs/Web/CSS/order](https://developer.mozilla.org/en-US/docs/Web/CSS/order)

**align-self :** <a name="align-self"></a>

It is used to align individual flex items along a cross axis. The values for this property can be flex-start, flex-end, center, stretch, and auto.

**Syntax :**

```
.item1{
  align-self: flex-start;
}
```
{% codepen https://codepen.io/Mohiyaddeen-raza/pen/YzRgZNe %}

**For more information on align-self property visit :**[https://developer.mozilla.org/en-US/docs/Web/CSS/align-self](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self)

**flex-grow :** <a name="flex-grow"></a>

It is used to define the ability of an individual flex item to grow relative to other flex items. By default, the flex-grow property value for all the flex items is 0.

**Syntax :**

```
.item1{
  flex-grow: 1;
}
```
{% codepen https://codepen.io/Mohiyaddeen-raza/pen/abQMJWJ %}

**For more information on flex-grow property visit :**[https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow)

**flex-shrink :** <a name="flex-shrink"></a>

It is used to define the ability to shrink an individual flex item relative to other flex items. By default, the flex-grow property value for all the flex items is 1.

**Syntax :**

```
.item1{
  flex-shrink: 3;
}
```

**For more information on flex property visit :**[https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink)

**For more information on flex property visit :**
[https://developer.mozilla.org/en-US/docs/Web/CSS/flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex)

---

## CSS Grid <a name="grid"></a>

![Illustration of CSS grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yx3cdynuqhzkq79aro7p.png)

This approach offers precise control over the placement and alignment of content, making it ideal for designing intrinsic page layouts and complex components. We can achieve versatile and dynamic layouts that adapt seamlessly to various screen sizes and orientations. CSS Grid's intuitive syntax and robust capabilities make it an essential tool for modern web development, enabling developers to craft visually appealing and structured designs efficiently.

**Syntax :**

```
.container{
  display:grid;
}
```
{% codepen https://codepen.io/Mohiyaddeen-raza/pen/eYQXgWX %}

In the above codepen we have created a CSS grid with 1 column and 8 rows.

**Grid properties for parent (grid container) are:**


1. **[grid-template-columns](#grid1)**
2. **[grid-template-rows](#grid2)**
3. **[justify-content](#grid3)**
4. **[align-content](#grid4)**
5. **[grid-template-areas](#grid5)**

**grid-template-columns :** <a name="grid1"></a>

It is used to specify the number and width of columns in a grid layout. The values for this property can be auto, length, max-content, min-content.

**Syntax :**

```
.container{
  display:grid;
  grid-template-columns: auto auto auto; 
}
```
{% codepen https://codepen.io/Mohiyaddeen-raza/pen/yLQwgpZ %}

In the above codepen we have created a CSS grid with 3 columns and 3 rows.

**For more information on grid-template-columns property visit :**[https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)

**grid-template-rows :** <a name="grid2"></a>

It is used to specify the height of rows in a grid layout. The values for this property can be auto, length, max-content, min-content.

**Syntax :**

```
.container{
  display:grid;
  grid-template-rows: 20px 100px 50px; 
}
```

**For more information on grid-template-rows property visit :**[https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows)

**justify-content :** <a name="grid3"></a>

It is used to horizontally align the whole grid inside the container. The values for this property can be center, space-between, space-around, space-evenly, start.

**NOTE : illustrations for this property are shown above in this post while discussing Flexbox. Please refer to it.**

**align-content :** <a name="grid4"></a>

It is used to vertically align the whole grid inside the container. The values for this property can be center, space-between, space-around, space-evenly, start, end.

**NOTE : illustrations for this property are shown above in this post while discussing Flexbox. Please refer to it.**

**grid-template-areas :** <a name="grid5"></a> <a name="g3"></a>

It is used together with the CSS "grid-area" property to establish the areas within the grid layout.

**Syntax :**

```
.container{
  display:grid;
  grid-template-areas: "box1 box2"
                       "box1 box2"; 
}

.box1{
  grid-area: box1; 
}

.box2{
  grid-area: box2; 
}

.box3{
  grid-area: box3; 
}
```

**For more information on grid-template-areas property visit :**[https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)

**CSS media queries :**

It is used to apply CSS when a certain condition is true.

**Syntax :**

```
@media screen and (max-width:360px) {
    body{
        background-color: blue;
    }
    
}
```

{% codesandbox jyjkqt %}

**Exercise : For the above codebox, try changing the orientation by sliding from left to right. If you see changes in page layout, they are achieved using the "grid-template-areas" property and media queries. When width is reduced to 360 px, we have changed the value of "grid-template-areas" to another value.**

**For more information on CSS media queries visit :**[https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)

**Grid properties for grid items (children) are:**

1. **[grid-column](#g1)**
2. **[grid-row](#g2)**
3. **[grid-area](#g3)**

**grid-column :** <a name="g1"></a>
It is used to define where the grid items start and end in the **direction of the columns.**

**Syntax :**

```
.grid-item1 {
  grid-column: 1 / span 2;
}
```
{% codepen https://codepen.io/Mohiyaddeen-raza/pen/eYQXvmN %}

In the above codepen, we have created a grid with 4 columns. and we have spanned item 1 from column-1 to column-2.

**For more information on grid-column property visit :**[https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)

**grid-row :** <a name="g2"></a>

It is used to define where the grid items start and end in the **direction of the rows.**

**Syntax :**

```
.grid-item1 {
  grid-row: 1 / span 2;
}
```
{% codepen https://codepen.io/Mohiyaddeen-raza/pen/LYXaWpy %}

In the above codepen, we have created a grid with 4 columns. and we have spanned item 1 from row-1 to row-2.

**For more information on grid-row property visit :**[https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)

**For more information on grid property visit :**[https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout)

**Let's connect on [LinkedIn]**(https://www.linkedin.com/in/mohiyaddeen-raza) 🚀

✨Embrace the art of layout design in CSS and let your creativity flow through grids, flexboxes, and responsive wonders. Remember, every pixel you place is a stroke of innovation, shaping the digital experiences of tomorrow. As you embark on your journey to master layouts, don't hesitate to ask questions, share insights, and collaborate with fellow developers. The world of web design is constantly evolving, and by honing your layout skills, you're sculpting the future of the web, one line of code at a time. Keep pushing boundaries, keep learning, and keep crafting exceptional user experiences.✨

See you next time for more amazing guides.

**Happy coding✌🏻**

**Please don't hesitate to ask doubts in the comments section—I'll be sure to respond promptly. Your inquiries are greatly welcomed and will receive a swift and thorough reply.**❤️