From Tables to Grid and Flex: How CSS Has Evolved Over the Years

CSS, oh how you’ve grown! Remember the days when we used tables to create layouts, 1-pixel images to create space, and all sorts of hacks to center elements or make them work across different browsers? Oh, the humanity! But my dear CSS, you’ve come a long way since then.

Gone are the days of using tables for layouts, now we have CSS Grid and Flex. These new layout tools allow us to create responsive and flexible designs with ease. With CSS Grid, we can create grid-based layouts like a photo gallery or calendar with just a few lines of code. And Flex, oh Flex, you make aligning items horizontally or vertically a breeze.

For example, let’s say we want to create a navigation bar, with the logo on the left, some links in the middle, and a search bar on the right. In the olden days, we would have used tables, floats, and all sorts of hacks to make this happen. But now, with Flex, we can do it with just a few lines of code:

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<nav class="navbar">
  <div>Logo</div>
  <div>Links</div>
  <div>Search…