Making your HTML responsive using simple CSS
In this article, I will teach you how to make your HTML website responsive using simple CSS Grid.
Write HTML for following website like that:
And CSS :
In following CSS code, grid-template-columns: 30px 30px 30px; HTML not responsive. So, We should bit change. Responsiveness with fractional unit. Fractional unit is one kind of unit like pixel, centimeter etc.
Fractional unit is written as fr. It allows to split container that you want. So, let a bit change our CSS. Code is:
In this following code, container width split into three portion responsively. Like following below:
Here three column is responsive according to width. We change this only grid-template-columns by fractional unit. Also we get this responsiveness using repeat( ) function. Like this code:
What happen in this code section, repeat function has two parameter. First parameter is for number of column and second parameter for width size of column. On the other hand, repeat(3, 1fr) means (1fr 1fr 1fr). Repeat three column according container width by one fraction.
Thank for reading! My name is Imtiaz. I’m an innovative web developer. Follow me on LinkedIn if you want to keep in touch.
