How can I display columns side-by-side with Flexbox or DIV?

Question

I'm converting an old HTML site which has this layout:

body {
    font-family: Verdana, sans-serif;
    font-size: 14px;
    background-color: #FFF;
}

table {
    background-color: #FFF;
    width: 400px;
}

td, tr {
    border: 1px solid;
}

td img {
    width: 190px;
}

td img:after {
    content: "Image for illustration purposes only";
    font-weight: 300;
}

Stock list

    
        
        2014 FORD FOCUS 1.0 TITANIUM 5dr silver £6999
    
    
        
        1999 NISSAN MAXIMA 3.0 V6 GXE 4dr blue £500
    
    
        
        1983 CHRYSLER E-CLASS 2.2 4dr white, classic car £3290

Note that the after pseudo-selector did not display the text.

This is what I am aiming for as a design (although with the white background):

Advert design from magazine

I'm aware about column-gap for spacing of columns.

How would I do this with DIV and either Flex or grid?

So far I've tried:

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
}

div.autota {
    display: grid;
    width: 320px;
    border: 2px solid;
    columns: 2;
    margin-bottom: 15px;
}

div.autota img {
    height: 90px;
}


    
            2014 FORD FOCUS 1.0 TITANIUM 5dr silver £6999
        
        
    1999 NISSAN MAXIMA 3.0 V6 GXE 4dr blue £500
        
        
    
            1983 CHRYSLER E-CLASS 2.2 4dr white, classic car £3290

And this hasn't quite come out looking like the image linked to.

user_121676 · Answer

You have to float the divs to the left. You should use percentage in width to make it responsive. I suggest you use some CSS framework, like Bootstrap, there isn't any need to reinvent the wheel.

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
}

div.autota {
    display: grid;
    width: 320px;
    border: 2px solid;
    columns: 2;
    margin-bottom: 15px;
    float: left;
}

div.autota img {
    height: 90px;
}
.clear {
    clear: both;
}


    
    2014 FORD FOCUS 1.0 TITANIUM 5dr silver £6999



    1999 NISSAN MAXIMA 3.0 V6 GXE 4dr blue £500



    
    1983 CHRYSLER E-CLASS 2.2 4dr white, classic car £3290

user_19140003 · Answer

Your HTML content should look something like this:


   
     
        
        2014 FORD FOCUS 1.0 TITANIUM 5dr silver £6999
     
   

   
      Do the same as above for all items

Then you can add CSS

.grid-container {
   display: grid;
}

And there are tons of different styles you can add to change the layout of your grid further! Take a look here once you've got the basic layout: CSS Grid Layout Module

user_12641617 · Answer

If you want to make that kind of layout with Flexbox you could use:


    ...

    
        
        2014 FORD FOCUS 1.0 TITANIUM 5dr silver £6999

Into something like this


    
        
        2014 FORD FOCUS 1.0 TITANIUM 5dr silver £6999
    
    ...

Where in your CSS you would put something like this:

.container{
    display: flex;
    flex-direction: col;
    /* ... your styles */
}

.row{
    display: flex;
    flex-direction: row;
    width: 100%;
    /* ... your styles */
}

.col{
    width: 50%;
    /* ... your styles */
}

And that's about it. There isn't any need for external libraries of anything like that.

But of course, as you yourself said. This could be solved in an even easier manner with CSS Grid.

How can I display columns side-by-side with Flexbox or DIV?

3 Answers