4 Ways to define layout in CSS

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.

Thanks for reading the post.

If you want to learn how to build a full-stack subscription website, please check out my course.

If you find this post useful, please share it on your social platform to reach out to more people.

Share this Blog