Describe the difference in approaches to create columnar lay

Describe the difference in approaches to create columnar layouts between the older float-based method and the modern CSS3 Flexible Box Layout Module.

Solution

The Differences Between the older float-based method and the modern CSS3 Flexible Box Layout Module :

Now that you have an idea of how the problem was solved before now, let’s take a look at what Flexbox and Grid bring to the table.
Flexbox and Grid are the perfect CSS layout solutions?—?the modern standards. If you must write CSS at a reasonable level, then investing in a Flexbox and Grid education is priceless.
How Do You Solve the Same Problem with Flexbox?
The Flexbox formating context is kicked off by creating a flex container.
Forget the lingo, it’s quite easy.
The parent element here is the body element. It houses the sidebar and main content area. So, make it a flex container:
body {
display: flex;
}

Including display:flex kicks off the Flexbox model, and initiates a flexbox formatting context.
Do not forget the proportions:
aside {
width: 25%;
}
main {
width: 75%;
}
There’s a lot more you could do with Flexbox, such as:

(a) Center the sidebar and main content area along the vertical axis
html, body {
height: 100%;
}
body {
align-items: center;
}

(b) Re-position just one of the children items
aside {
align-self: center;
}

(c) Change the source order of a child element without affecting the html document
aside {
order: 2
}
How Do You Solve the Same Problem with Grid?

The CSS Grid layout is the ultimate layout solution. With it comes a lot of power too.
Let’s take a brief look at how the same problem may be solved using the Grid layout.
Just like Flexbox, the process begins just the same way.
Make the container element a grid container.
body {
display: grid;
}
If you’re curious, here’s all the CSS at this point:
body {
display: grid;
background-color: #eeeeee;
}
aside {
color: #fff;
background-color: #8cacea;
}
NOTE :
To use the Grid layout, you must have a compliant browser such as the new Firefox 52 or Chrome 57.
The image above doesn’t look like anything magical has happened. Well, not yet.
What if you split width proportions like we have done in the cases above:
aside {
width: 25%;
}
main {
width: 75%
}
It does make a difference, but NOT the kind you were expecting. The sidebar and main content areas are not side by side yet.
This brings me to explaining an important part of using the Grid Layout.
After setting up a grid container with the display: grid, you have to define how you layout rows and columns within this grid container.
How do you do that?
body {
grid-template-columns: 30% 70%;
}

(a) You can define gaps between columns
body {
grid-column-gap: 15px;
}

(b) You Can Have as Many Columns (or Rows) as You Want

(c) You can define the sizes of rows
Like you defined the relative sizes of the grid-column, you can do the same for rows.
body {
grid-template-rows: 200px 300px 400px;
}