Looking to have 3 columns across 2 rows with the content only being images

Question

I've been trying to create a column that has a 3 across the top by two rows down. So far I've only been able to create the first row but I don't know how to break it onto the second row.

.container {
  display: flex;
  justify-content: space between;
}

.column {
  display: inline block;
  padding: 0.5em;
  display: block;
  width: 33.333%;
}

<div class = "container">
    <div class="column"><img src = "image.jpg" alt = "photo of title and logo" width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of title and logo "width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of wortherspoons" width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of title and logo" width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of title and logo "width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of wortherspoons" width="600" height="300"></div>
</div>

Why don't you use one of the responsive frameworks? Like Bootstrap, Foundation, etc.. They all have 'grid' components that will achieve this. — Fraze, Dec 06 '18 at 12:24
My college lecturer wants to get through the basics first on notepad++ and then advance to other programmes. if I was to use bootstrap or anything else id get marked down as a result. — , Dec 06 '18 at 12:30

score 1 · Accepted Answer · answered Dec 06 '18 at 12:38

You almost had it, you are just missing a couple of CSS rules:

.container {
    display: flex;
    justify-content: space between;
    flex-wrap: wrap; /* added - this tells Flex to wrap onto a new line, if there is no space. */
}

.column {
    display: inline block;
    padding: 0.5em;
    display: block;
    width: 33.333%;
    box-sizing: border-box; /* added - this changes the way padding is applied, so it always stays at 33.33%, regardless of padding */
}

Additionally, if you want, you can add this style to make it look a bit nicer:

.column img {
    display: block; /* removes the spacing underneath the image */
    width: 100%; /* sets the width to the parents width */
    height: 100%; /* set the height to the parents height */
    object-fit: cover; /* prevents image from stretching */
}

Demo: https://jsfiddle.net/yx6h4emn/

score 0 · Answer 2 · answered Dec 06 '18 at 12:34

Not tested, but if you are using Flex it will wrap. So you want to break your columns down into rows as well, similar to this:

<div class = "container">
    <div class="column"><img src = "image.jpg" alt = "photo of title and logo" width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of title and logo "width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of wortherspoons" width="600" height="300"></div>
</div>
<div class = "container">
    <div class="column"><img src = "image.jpg" alt = "photo of title and logo" width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of title and logo "width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of wortherspoons" width="600" height="300"></div>
</div>

score -1 · Answer 3 · answered Dec 06 '18 at 12:49

pls try this code

<!DOCTYPE type>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">


    <title>Album example for Bootstrap</title>


    <style>
    .container
    {
    display: flex;
    flex-wrap: wrap;
    }

    .column
    {
    display: inline block;
    /*padding: 0.5em;*/
    display: block;
    width: calc(33.333% - 0.5em);
    }
    .column img{
      width: 100%;
    }
    </style>

  </head>
  <body>
    <div class = "container">
      <div class="column"><img src = "image.jpg" alt="photo of title and logo" width="auto" height="300"></div>
      <div class="column"><img src = "image.jpg" alt="photo of title and logo" width="auto" height="300"></div>
      <div class="column"><img src = "image.jpg" alt="photo of wortherspoons" width="auto" height="300"></div>
      <div class="column"><img src = "image.jpg" alt="photo of title and logo" width="auto" height="300"></div>
      <div class="column"><img src = "image.jpg" alt="photo of title and logo" width="auto" height="300"></div>
      <div class="column"><img src = "image.jpg" alt="photo of wortherspoons" width="auto" height="300"></div>
  </div>


  </body>
</html>

Looking to have 3 columns across 2 rows with the content only being images

3 Answers3