CODEWITHSUNDEEP
htmlcssresponsive-designflexbox
Aris Constantinou
Aris Constantinou

Reputation: 188

How can I divide 4 images into 2x2 grid using Flexbox?

I ran into a strange situation 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.

I found another question Stackoverflow question 100% similar with mine but for some reason the code does not work.

Here is a Codepen

This is my code:

<!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.css

* {
  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.css

@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;}
}

Upvotes: 4

Views: 2748

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371251

Make an adjustment to the flex-basis value in your flex shorthand rule.

Instead of this:

@media screen and (min-width: 655px) {
    .primary li { flex: 1 1 0; }
}

Try this:

@media screen and (min-width: 655px) {
    .primary li { flex: 1 1 calc(50% - 2.4%); }
}

In your original code, flex: 1 1 0 tells the flex item to start with a width of 0px. This is represented by the third value, which means flex-basis: 0. The four flex items then expand as much as they can on the same line with flex-grow: 1, represented by the first value in the flex rule.

In the adjusted code, we tell each flex item to be 50% wide (less the margin you have applied elsewhere in your code). This forces two flex items per line.

Upvotes: 1

gbavba
gbavba

Reputation: 116

Add min-width: 40%; in Responsive.css like this

@media screen and (min-width: 655px) {
    .primary ul{display: flex;flex-flow:row wrap;}
    .primary li{ flex: 1 1 0; min-width: 40%; }
    .secondary li{flex: 1 1 0; min-width: 40%; }
}

that should give you a 2x2 grid for screens >655px wide then add min-width: 0%; to .primary li under the @media screen and (min-width: 1290px) statement if you want the list items to appear in a single row above 1290px.

Upvotes: 2

Related Questions