# CSS Flexbox Vs Float Vs Grid

In this article, we shall in depth understand the different CSS layout techniques.

#### **CSS Flex-Box**

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

**CSS for whole container**

```plaintext
display: flexbox | inline-flex;  
flex-direction: row | row-reverse | column | column-reverse;  
flex-wrap: nowrap | wrap | wrap-reverse;  
flex-flow: <‘flex-direction’> || <‘flex-wrap’>  
justify-content: flex-start | flex-end | center | space-between | space-around;  
align-items: flex-start | flex-end | center | baseline | stretch;  
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
```

**CSS for items in a container**

```plaintext
order: <integer>;  
flex-grow: <number>; /* default 0 */  
flex-shrink: <number>; /* default 1 */  
flex-basis: <length> | auto; /* default auto */  
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]  
align-self: auto | flex-start | flex-end | center | baseline | stretch;
```

**Property #1:**`**display: flex**`

A container’s default `display: block` in this context, `display: flex` tells your browser ‘’I want to make this container flexible.’’

![](https://cdn-images-1.medium.com/max/800/0*mK57U3bfNzRmAkZX align="left")

Source: Scott Domes

Initially, each of the four containers (green, orange, red, blue) are defaulted with `display: block` thereby take all space from right to left.

**Property#2:**`**Flex direction**`

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1715337085173/53f62333-ce34-4121-89ee-22752ccfe9d9.png align="left")

Flexbox terminology diagram from [official W3C specification](https://www.w3.org/TR/css-flexbox-1/).

On application of flex property, we create a flexbox with two axes as showed above. This is why your squares defaulted to a horizontal line once you applied `display: flex`.

```plaintext
#container {  display: flex;  flex-direction: column;}
```

![](https://cdn-images-1.medium.com/max/800/0*4MfktKKhutbAHR7W align="left")

Source: Scott Domes

`flex-direction: column` is an interesting property in that it doesn’t align content on the cross axis instead of main axis. **It alters the main axis from horizontal to vertical.**

**Property#3:**`Justify content`

Justify content determines how items are aligned along the main axis. Attributes include; **Flex-start: Flex-end, Center, Space-between (gives equal space between each square, but not between it and the container), Space-around(puts an equal space on either side of the square).**

```plaintext
#container {  display: flex;  flex-direction: row;  justify-content: flex-start;}
```

![](https://cdn-images-1.medium.com/max/800/0*WI5BYaNdvzroKdKS align="left")

Source: Scott Domes

**Property#4:**`Align items`

With a recap from justify-content that works applies to the main axis, align-items applies to the cross axis. flex-start, flex-end, center, stretch(items take up the entirety of the cross-axis), baseline(bottom of the paragraph tags are aligned).

![](https://cdn-images-1.medium.com/max/800/0*R4zs30XsowkV6KA3 align="left")

Source: Scott Domes

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1715337090731/67a183a3-f50e-4a61-a184-84741a3b0040.png align="left")

Source: Scott Domes

Property#5: `Align self`  
Align-self property helps us to align individual items thereby overriding the align-items though it follows the rule for the entire container.  
`#container { align-items: flex-start;}`  
`.square#one { align-self: center;}// Only this square will be centered.`

![](https://cdn-images-1.medium.com/max/800/0*teaf-1aEwVv5OR97 align="left")

Source: Scott Domes

**CSS Float**

When we add `float: left;` to a container, the elements will be positioned to the left of the other .

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1715337094279/671e4f87-41f9-489b-9401-0a5acbd62aea.png align="left")

before

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1715337095784/99c01e43-2947-4fd5-82ed-dbcb7cc23b2a.png align="left")

after

Further more, when we add `float: right;` to the float items, they will be to the right of the containers and side by side to each other from right to the left.

The most applicable use of floats is when designing a navigation bar.

**CSS Grid**  
`display: grid;` is newest and most powerful layout system in CSS. It offers 2-dimensional layouts thereby you handles both rows and columns unlike flexbox which is largely 1-dimensional. You work with Grid layout by applying CSS rules to both the parent element (which becomes the Grid Container) and to its children (which become the Grid Items).  
**Grid Container**

```plaintext
`grid-container {  display: grid | inline-grid }  
grid-template-rows { <integer> <integer> } /**specifies number of columns **/  
gird-template-columns { <integer> <integer> <integer> <integer> }` /\*\* specifies number of columns \*\*/  
justify-content { space-evenly | space-between | center | end }  
align-content { center | space-evenly | space-around | space-between | start | end }
```

When you assign the `display` property of a container to `grid` , every element in it becomes a grid item.

**Conclusion**

Besides the above explained CSS layout techniques, you can use CSS libraries such as Bootstrap, Material UI, Semantic UI, etc. to make web pages responsive.

references: [w3schools](https://www.w3schools.com/css) , [css-tricks.com](https://css-tricks.com)