4 Ways to define layout in CSS
Taimoor Sattar・
Layout in CSS makes your content sit in a row or column. A Flexible layout helps to fit more content in less space.
Below are the ways in CSS to make the flexible layout in CSS:
| Sr# | First Column | Second column | Third column |
|---|---|---|---|
| 1. | Table | Table are used to structure large amount of data in column and rows. Table is the HTML way to layout the data. | Read more about HTML table → |
| 2. | Floats | Floats remove the HTML element from the normal flow of the page. | Read more about CSS Floats → |
| 3. | Flexbox | Flexbox allow the content to sit side-by-side | Read more about CSS Flexbox → |
| 4. | Grid | CSS grid is the most powerful layout system for 2-dimension. | Read more about CSS Grid → |
We can use any technique as discussed above to create any kind of layout (either 1-dimension or 2 dimensions).
For a 2-dimensional layout, we can prefer a CSS grid to make our code small. But not every browser supports a CSS grid. We can search for browser compatibility at caniuse.com.
About the Author
Taimoor Sattar
I'm a full-stack developer and educator. I've always been intrigued by languages used elegantly and efficiently, regardless of whether they are interpreted by humans or computers.