A website's responsive design is very crucial. No matter how great your website's user interface is, if it doesn't fit on every screen, from large to small, it will lose its significance.
So there will be a lot of basic things that I will cover in this blog so that you don't have to worry about responsiveness.
Flexbox
When you are struggling with responsiveness. Flexbox solves many difficult problems. Because it has a one-dimensional layout, it works only in one direction. Basically, it works with your web content. Some examples are given below how it works in column and rows in website.
Example:
If you work with flex rows responsive ,then set the width of left and right to 50%, center to 100% and then declare "flex-flow: row wrap;" on the container.
Meanwhile, if you work with flex column responsive ,screens that are 992px wide or less, the columns will then transform itโs size from four columns to two columns. At the same, The column will be on top of another rather than close to each other in 600px wide or less.
Grid system
Grid will change its layout according to the size of the screen. It will adjust itself to any screen. It is very suitable for large scale layout as it can control two dimensional layout both on rows and columns. Grid layout also help you to write less code than media queries and it is also easier to apply.
You can use display: grid to use grid in your container.
Based on row and column you need to declare grid-template-rows and grid-template-columns in CSS.
You can also give a gap between rows and columns by declaring grid-column-gap and grid-row-gap.
Bonus Tip
100% and Block
To make any div and section responsive in a small screen you can use Width 100% and block. But be careful it is not appropriate in every situation.
Top comments (0)