CSS Layouts : A comprehensive guide for developers 🔥

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
2. Flexbox
3. CSS Grid

Float Layouts

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;
}

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

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;
}

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

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

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
2. flex-wrap
3. justify-content
4. align-items
5. align-content

flex-direction :
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;
}

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

flex-wrap :

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;
}

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

justify-content :

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;
}

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

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

align-items :

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;
}

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

align-content :

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;
}

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

Flex properties for flex items (children) are:

1. order
2. align-self
3. flex-grow
4. flex-shrink

order :

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;
}

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

align-self :

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;
}

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

flex-grow :

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;
}

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

flex-shrink :

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

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

CSS Grid

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;
}

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
2. grid-template-rows
3. justify-content
4. align-content
5. grid-template-areas

grid-template-columns :

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; 
}

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

grid-template-rows :

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

justify-content :

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 :

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 :

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

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;
    }

}

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

Grid properties for grid items (children) are:

1. grid-column
2. grid-row
3. grid-area

grid-column :
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;
}

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

grid-row :

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;
}

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

For more information on grid property visit :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.❤️