How can i divide 4 images into 2x2 grid using Flexbox for Tablet?

Question

Hello, I ran into a strange position with flexbox. Basically i have 4 images inside a flexbox container and while on mobile it looks ok (2x2 grid/columns) i can't figure how to do the same from 655px(media query) until 1290px. Codepen: http://codepen.io/anon/pen/grLXjm?editors=1100 or my code:

Index

<!DOCTYPE html>
<html>
 <head>
     <link rel="stylesheet" href="css/framework.css">
     <link rel="stylesheet" href="css/responsive.css">
     <link href='https://fonts.googleapis.com/css?family=Electroliz0' rel='stylesheet' type='text/css'>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
     <script src="js/custom.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">      
  <title>NK Electrical LTD</title>
 </head>
 <body>
     <div class="container">
         <div class="header">
         <img src="img/nklogo.png">
         </div>
         <nav class="flex-nav">
         <ul>
             <li><a href="£"><span>Home</span></a></li>
             <li><a href="£"><span>Electrical Installations</span></a></li>
             <li><a href="£"><span>Lighting</span></a></li>
             <li><a href="£"><span>Home Appliances</span></a></li>
             <li><a href="£"><span>Contact</span></a></li>
             <li><a href="£"><span>About</span></a></li>
             <li class="social">
          <a href="https://www.facebook.com/nkelectricalltd/?fref=ts"target="_blank"><img src="img/fbicon.png"></a>
        </li>
             </ul>
         </nav>
     <div class="primary">
  <ul>
    <li class="flex-item"><img src="img/electrical.png"><p>Electrical Installations</p></li>
    <li class="flex-item"><img src="img/lighting.png"><p>Lighting</p></li>
    <li class="flex-item"><img src="img/homeappliances1.png"><p>Electrical Appliances</p></li>
    <li class="flex-item"><img src="img/homeappliances2.png"><p>Kitchen Appliances</p></li>
  </ul>
</div>
<div class="secondary">
  <h1>Our latest products</h1>
  <ul>
    <li class="flex-item"><img src="img/1.jpg"></li>
    <li class="flex-item"><img src="img/2.jpg"></li>
    <li class="flex-item"><img src="img/3.jpg"></li>
    <li class="flex-item"><img src="img/4.jpg"></li>
  </ul>
</div>
         <footer><p>&copy; NK ELECTRICAL LTD 2016</p></footer>
     </div>
 </body>
</html>

Framework/main

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
a{text-decoration: none;}
ul{list-style: none;}
body{font-family: 'Electrolize', sans-serif;font-size: 16px;}
.container{display: flex;flex-direction:column;}
.primary ul{display:flex;flex-flow:row wrap;}
.primary li{flex:auto;width:200px;margin:1%;padding:2%;background-color: #1c1c1c;color: #bdc3c7;}
.primary p{
  padding: 20px;
  background-color: #483636;
  color: #bdc3c7;
  text-align:center;}
.primary img{width:100%;height: auto;}
.secondary{background-color:#1c1c1c;}
.secondary ul{display:flex;flex-flow:row wrap;}
.secondary li{flex:auto;width:200px;margin:2%;border:2px solid white;}
.secondary img{width:100%;height:auto;}
.secondary h1{color:white;text-align: center;}
.flex-item{width:50%;text-align: center;}
.flex-nav{margin: 0 auto;margin-bottom: 3%;}
.flex-nav ul{display: flex;flex-wrap: wrap;}
.flex-nav a{
    display: block;
    color: #797e83;
    font-size: 1.125em;
    font-weight: 300;
    text-align: center;
    padding: .4em;
    border-bottom: 1px solid #ebecec;}
.flex-nav li{
    text-align: center;
    margin: 0 auto;
    flex-basis:500px;
}
.flex-nav a:hover {
    color: #0b0b0b;
    border-bottom-color: #52bab3;
}
.header{display: flex;margin: 0 auto;}
.header img{width:100%; width: 200px;;height: auto;}
footer{background-color: black;padding:10%;}
footer p{color:white;text-align: center;font-size: 1.5em;}
.social{display: flex;flex-direction: row wrap;justify-content: center;}
.social a{width:100%;}

Responsive

@media screen and (min-width: 655px) {
    .primary ul{display: flex;flex-flow:row wrap;}
    .primary li{ flex: 1 1 0;}
    .secondary li{flex: 1 1 0;}
}
@media screen and (min-width: 1290px){
    .container{display: flex;flex-flow: column wrap;max-width:1290px;margin: 0 auto;}
.flex-item {
  border: 1px solid white;
  padding: 5px;
  width: 200px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
.flex-nav{width:80%;}
.flex-nav ul{display: flex;margin:0 auto;;padding:0;list-style:none;}
.flex-nav li{flex:auto;text-align: center;display:flex;}
.flex-nav a{flex-basis: 100%;display: flex;align-items: center;}
.flex-nav span{display: block;width:100%;}
    .fa-facebook{flex:1;}
.primary {
    align-self: center;
    width:80%;
    margin-bottom:1em;
}
.primary li{background-color: #1c1c1c;
  color: #bdc3c7;font-size: 1.5em;margin:1.2%;}
.primary p{
  padding: 6%;
  background-color: #483636;
  color: #bdc3c7;
  text-align:center;
}
.secondary{
    align-self:center;
    width:80%;
    background-color:#1c1c1c;
    margin-bottom:1em;
}
.secondary li{margin:1.2%;}
h1{width: 100%; color:white;text-align: center;}
img{max-width: 100%; height: auto;}
}

Answer 1 · 2016-03-20T10:15:58Z

March 20, 2016 10:15am

Flex-wrap only creates the second row, because it ran out of space in the case of viewport width 655 and less, so I would suggest to limit the width of the primary div to some lower value in case the viewport width is above 655px, to force the flex items to wrap and create second row.

Welcome to the Treehouse Community

Looking to learn something new?

Aris Constantinou

Aris Constantinou

How can i divide 4 images into 2x2 grid using Flexbox for Tablet?

1 Answer

Michal Janecek

Michal Janecek