When you open any website today the first impression is how it looks & how well things are arranged, so for that, we have bootstrap and other CSS frameworks that simply change the look and feel of your website. Here the problem is that you are not using all the features of bootstrap but injecting the whole feature and polluting the code, adding multiple classes and compromising the performance of your website.

Here I am not focusing on the whole replacement of bootstrap, as it is a very powerful tool. But if you only want to arrange the things, then you have something which is very powerful and also it arranges the content very neatly and simply it gives you responsive design with fewer efforts and no compromising with the performance.

Wait wait,.. now you can say that the alignment can be done by using Float, then why flex-box and grid?

Well, if you do not know the height of the container then it will be difficult for you to manage. Since complex designs are not easily implemented using floats.

And If you want to align something vertically center or responsive, it will be very difficult to write the CSS for different screen sizes.
In case of float, you have to write it compulsorily, otherwise, your site will start to break on some browsers, so you need to do that.

---

Now, Let’s talk about the solution: Flex-Box and Grid.

These two are a very powerful concept in CSS if you know how to use them. Both the concepts are used for layout, but we will see each of them one by one.

FLEX-BOX

When we want to design the things in only one direction then flex box is the perfect solution for us.
To start using the Flex-Box model, you need to first define a flex container or parent container. Flex container becomes flexible by setting the display property to flex.

div {
display: flex;
}

There are many properties which we can define in the parent container, like:

• display — flex | inline-flex
• flex-direction — row(default) | column | row-reverse | column-reverse

This property defines in which direction the items of the container wants to flow.

• flex-wrap — nowrap (default) | wrap | wrap-reverse

This property defines whether the flex items should wrap in second line or not.

• flex-flow — flex-direction | flex-wrap

A shorthand property for setting flex-direction and flex-wrap properties.

div {
display: flex;
flex-flow: row wrap;

//[flex-direction is row and flex-wrap is wrap]
}

• justify-content — flex-start | flex-end | center | space-between | space-around | space-evenly

This property is used to align the child items horizontally. If we want to align all the child items to the center of the parent container we will use –

justify-content: center;

• align-items — flex-start | flex-end | center | stretch | baseline.

This property is used to align the flex items vertically. If we want to align all the child items vertically to the center of the parent container we will use –

align-items: center;

All these are the most common properties we used as parent properties in flex-box.

<div >
<div class=’one’>first child element</div>
<div class=’two’>second child element </div>
<div class=’third’>third child element</div>
</div>

There are a few child properties as well which we can use in child containers. like –

• order : <integer> (default = 0)

Order is used to arrange the child items.

• flex-grow : <integer> (default = 0)

Flex-grow specifies how much a child item will grow with respect to the rest of the flex items.

• flex-shrink : <integer> (default =1)

Flex-shrink specifies on how much a child item will shrink with respect to the rest of the flex items.

• flex-basis : <length> | % | px | auto (default )

Flex-basis specifies the width or length of the item.

• flex : flex-grow | flex-shrink | flex-basis

Flex is a shorthand property for the flex-grow, flex-shrink and flex-basis.

• align-self : flex-start | flex-end | center | stretch | baseline.

Align-self specifies the alignment for the selected item inside the parent container.

CSS — GRID

When we want to design the things in two directions, means vertically and horizontally at the same time CSS Grid is for us to use.

Similarly like Flex, we need to define a grid container or parent container as-

display: grid;

All direct children of the grid container will automatically become grid items.

div {
display: grid;
}

Similar to flex-box grid also have parent and child properties.

• display : grid | inline-grid
• grid-template-rows: fr|%| px

div {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
}

Grid-template-rows will divide the all three child items in equal 3 part of the parent container.

• grid-template-columns: fr | % | px

div {
display: grid;
grid-template-columns: 30% 70%;
}

Grid-template-columns will divide the both child items in 30% and 70%, where each value defines the height of the respective row

• grid-gap : row |column

Grid-gap helps designing the space between child items row and column wise.

• justify-items : start | end | center | stretch
• align-items: start | end | center | stretch
• justify-content : start | end | center | stretch (default) | space-between | space-around | space-evenly (rows need to be defined)
• align-content : (height need to defined)
• grid-auto-columns : auto-generated grid columns
• grid-auto-rows : auto-generated grid rows

Grid also have child properties similar to Flex which also works similar to flex-box.

• grid-column-start, grid-column-end, grid-row-start, grid-row-end

All these above properties are used to define from where to start end child items of grid column and row.

• grid-row : start-line / end-line | start-line / span <value>

Grid-row is the shorthand property of grid-row-start and grid-column-start.

.item1 {
grid-row: 1/2;
}

1 is the starting point of the row and 2 is the ending point of the row.

• grid-column: start-line / end-line | start-line / span <value>

.item1 {
grid-column: 1/2;
}

1 is the starting point of the column and 2 is the ending point of the column.

• justify-self : start | end | center | stretch

Justify-self is used for the alignment of a particular grid item in a row wise.

• align-self : start | end | center | stretch

Align-self is used for the alignment of a particular grid item column wise.

---

Here we covered all the important properties of Flex-Box & CSS Grid.

---

Now you know how Flex-Box and Grid can be used with their properties. So you can start designing your webpage and and make it responsive using Flex and Grid with less efforts.

That’s it for this topic, if you have any concerns related with any of this I’ll be happy to help you out.
You can either comment your queries or you can reach me via my social media handles mentioned on my profile.