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 (Not Recommended) Tables are not flexible in layout on different screen sizes. is
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

Written by Taimoor Sattar I'm Taimoor Sattar, a full-stack developer, experience to develop websites in React/JavaScript, Node, and HTML/CSS. You should follow them on Twitter. You can contact me on this page.