4 Ways to define layout in CSS

Taimoor Sattar
main Image

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.

Share this Blog