Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Muaaz Matwadia
.a{fill-rule:evenodd;}techdegree seal-36
Muaaz Matwadia
Full Stack JavaScript Techdegree Graduate 19,327 Points

Grid CSS

My autofill is not working and my grid items do not go to the next line. Please help thanks!

<h1>Get in Touch</h1> <div class="grid contact-bg" >

<div class="phone"> <img src="Images/mail.svg">

  <p>Drop us a line.</p>

<a href="mailto:example@gmail.com" >example@gmail.com</a> </div>

<div class="message">
  <img src="Images/phone-call.svg">

  <p>Text us.</p>
  <p>011 234 5678</p>
</div>

<div class="call">
  <img src="Images/phone-call (1).svg">

  <p>Give us a call.</p>
  <p>011 234 5678</p>
</div>

<div class="call-center">
<p>The call centre operating hours are from 08:00 to 17:00 on weekdays and 08:00 to 12:00 on Saturdays.</p>

</div>

<div class="address">
  <i class="fas fa-map-marker-alt fa-2x"></i>>

<address> <h4>Address</h4> <p>5th Avenue</p> <p>Sandton</p> <p>1825</p> <p>South Africa</p>

</address> </div> <!-- closing grid --> </div>

<!--CSS -->

/* Grid contact */ .grid{ max-width: 1000px ; margin: 45px auto; display: grid; grid-template-columns: repeat(auto-fill minmax(200px, 1fr)); grid-gap: 10px; grid-template-rows: 100px 200px ; }

.phone{ grid-column: 1/2; grid-row: 2/3; background-color: rgb(233, 90, 90); } .call{ grid-column: 2/3; grid-row: 2/3; background-color:rgb(233, 90, 90); }

.message{ grid-column: 3/4; grid-row: 2/3; background-color: rgb(233, 90, 90); }

.address{ grid-column: 4/5; grid-row: 2/3; background-color: rgb(233, 90, 90); }

.call-center{ grid-column: 1/5; grid-row: 1/2; background-color: rgb(233, 90, 90); } .grid > * { font-family: 'Xanh Mono', monospace; padding: 0.85em; text-align: center; }

5 Answers

Jeremy Caudle
Jeremy Caudle
23,719 Points
Jeremy Caudle
Jeremy Caudle
23,719 Points

Hi Azzie,

To get your auto-fill working correctly, you'll want to add a comma after the word auto-fill on your rule with the .grid selector. The repeat() CSS function requires a comma to work correctly.

Change this:

.grid{ max-width: 1000px ; margin: 45px auto; display: grid; grid-template-columns: repeat(auto-fill minmax(200px, 1fr)); grid-gap: 10px; grid-template-rows: 100px 200px ; }

To this:

.grid{ max-width: 1000px ; margin: 45px auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 10px; grid-template-rows: 100px 200px ; }

I couldn't figure out what you meant by "my grid items do not go to the next line" from looking at your code. When bringing your code into VS Code and then viewing it in Firefox, I saw a grid with two rows and a total of four columns. The top row has one item that spans all columns, and the second row has four items placed within their separate columns. If you're not seeing it the same in your browser, perhaps there's a syntax error somewhere within the HTML or CSS. I only spotted an extra > in the Address div, but it did not break the CSS layout when viewing it in Firefox.

If you wish to have a third row containing two of the four divs currently in the second row, you could alter the grid-column and grid-row declarations on any of the four divs to place them and make them span columns on a third row.

For example, the block below would place the message and address divs onto a third row in the grid.

.phone{ grid-column: 1/3; grid-row: 2/3; background-color: rgb(233, 90, 90); } 
.call{ grid-column: 3/5; grid-row: 2/3; background-color:rgb(233, 90, 90); }
.message{ grid-column: 1/3; grid-row: 3/4; background-color: rgb(233, 90, 90); }
.address{ grid-column: 3/5; grid-row: 3/4; background-color: rgb(233, 90, 90); }

I hope this info helps you out. Good luck!

Muaaz Matwadia
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Muaaz Matwadia
Full Stack JavaScript Techdegree Graduate 19,327 Points
Muaaz Matwadia
.a{fill-rule:evenodd;}techdegree seal-36
Muaaz Matwadia
Full Stack JavaScript Techdegree Graduate 19,327 Points

Hi, thanks for your reply. It's not working can I email you my code please and you can review it.🙏

Jeremy Caudle
Jeremy Caudle
23,719 Points
Jeremy Caudle
Jeremy Caudle
23,719 Points

Hi Azzie, I can review your code via a (CodePen) [https://codepen.io/] if you use it. (If you don't know about it, it's a great site too.) You can post your code in these comments as well if you'd like. The Markdown Cheatsheet was really helpful for me when writing my reply. I forgot to ask what course or challenge your code is written for. Could you let me know? I could take a look at that to try and help as well.

Muaaz Matwadia
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Muaaz Matwadia
Full Stack JavaScript Techdegree Graduate 19,327 Points
Muaaz Matwadia
.a{fill-rule:evenodd;}techdegree seal-36
Muaaz Matwadia
Full Stack JavaScript Techdegree Graduate 19,327 Points

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>Home Sweet Flower</title>
  <link href="style.css" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Xanh+Mono:ital@1&display=swap" rel="stylesheet">
</head>
<body>
    <header class="main-header">

      <a class="site-logo" href="index.html">
        <img src="Images/floral fushion.png" alt="flower logo">
      </a>

        <ul class="nav">
          <li><a href="flowers.html">Flowers</a></li>
          <li><a href="contact.html">Contact US</a></li>
          <li><a href="about.html">About US</a></li>
        </ul>


      </div>
</header>

<div class="gallery">

  <div class="card">
    <div class="white_roses side-a">
    <img src="Images/white_roses.jpg" alt="white roses" width="300px" height="200px">
    <p>White Roses</p>
    </div>
    <p class="side-b">euismod nisi porta lorem mollis aliquam ut porttitor leo a diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget felis</p> 
  </div>

<div class="card">
  <div class=" red_roses side-a">
  <img src="Images/red_roses.jpg" alt="red roses"  width="300px" height="200px">
  <p>Red Roses</p>
</div>
  <p class="side-b">euismod nisi porta lorem mollis aliquam ut porttitor leo a diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget felis</p> 
</div>

<div class="card">
  <div class= " sunflower  side-a">
 <img src="Images/sunflower.jpg" alt="sunflower"  width="300px" height="200px">
 <p>Sunflowers</p>
 </div>
<p class="side-b">euismod nisi porta lorem mollis aliquam ut porttitor leo a diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget felis</p>
</div>

<div class="card">
  <div class="lillies  side-a">
<img src="Images/lillies.webp" alt="white roses"  width="300px" height="200px">
<p>Lillies</p>
</div>
<p class="side-b">euismod nisi porta lorem mollis aliquam ut porttitor leo a diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget felis</p> 
</div>

<div class="card">
  <div class=" daisy  side-a">
  <img  src="Images/Daisies.jpg" alt="white roses"  width="300px" height="200px">
  <p>Daisies</p>
</div>
<p class="side-b">euismod nisi porta lorem mollis aliquam ut porttitor leo a diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget felis</p> 
</div>



<div class="card">
<div class="carnations side-a ">
  <img src="Images/carnations.jpg" alt="white roses"  width="300px" height="200px">
  <p>Carnations</p>
</div>
<p class="side-b">euismod nisi porta lorem mollis aliquam ut porttitor leo a diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget felis</p> 
</div>

<div class="card">
  <div class="multi side-a">
  <img src="Images/pexels-anna-shvets-5217966.jpg" alt="white roses"  width="300px" height="200px">
  <p>Reds & Whites</p>
  </div>
 <p class="side-b">euismod nisi porta lorem mollis aliquam ut porttitor leo a diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget felis</p> 
</div>

<div class="card">
  <div class="Special side-a">
  <img src="Images/pexels-craig-adderley-2306282.jpg" alt="white roses"  width="300px" height="200px">
  <p>Special Occasions</p>
</div>
<p class="side-b">euismod nisi porta lorem mollis aliquam ut porttitor leo a diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget felis</p> 
</div>


<!-- closing gallery container   -->

</div>
<footer>
  <p> &copy;Bella and Thorne, All Rights Reserved. No content on this site may be copied and reused in any form or fashion without express written permission.<a class="moody" href="www.moodybymuaaz.com"><b> By MOODY</b> </a></p>
 </footer>
</body>
</html>```
Muaaz Matwadia
.a{fill-rule:evenodd;}techdegree seal-36
Muaaz Matwadia
Full Stack JavaScript Techdegree Graduate 19,327 Points 
.main-header,
.nav{
    display: flex;
    flex-direction: column;
}

.site-logo{

   align-self: center;
}
.site-logo:hover{
    opacity: 0.8;
    transition: opacity .3s ease-in-out;
}
ul{
    list-style-type: none;
}
.nav{
    margin-top: 1.5em;
    list-style-type: none;

}

.nav a{
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 10px;
    margin: 1.1em;
    font-weight: 600;
    font-size: 1.5em;
    border-bottom: 1px solid rgb(233, 90, 90);
}

.nav a:hover{

    transition: color .2s ease-in-out;
    border-bottom: 1px solid rgb(31, 184, 184);
}
a:visited{
    color: black;
}
body{
    font-size: 1em;
    font-family: 'Xanh Mono';

}

.home-bg {
    background: url(Images/background2.0.jpg) no-repeat center center fixed;
    }

.about-bg{
    text-align: center;
    font-size: 2em;
    margin: 0;
    padding: 50px;
    background: url(Images/pexels-pixabay-414660.jpg) no-repeat center bottom;
background-size: cover;
}


.contact{
    text-decoration: underline;
}
.help{
   display: block;
   font-weight: 500;

    margin: auto;
    padding: 10px;
    text-align: center;
}
h1{
    text-align: center;
    margin: 15px;
    padding: 10px;
    border-bottom:  2px solid rgb(223, 93, 93);
}
h4{
    text-decoration:underline ;

}

h2{
    font-family: 'Xanh Mono', monospace;
    /* color: rgb(233, 90, 90); */
    font-size: 2em;
    font-weight: 500px;
    text-align: center;

}
h3{ 
    font-family: 'Xanh Mono', monospace;
    /* color: rgb(233, 90, 90); */
    font-size: 1.8em;
    font-weight: 500px;
    margin: auto;
    /* position: absolute;
    left: 50%;
    top:70%;
    transform: translateX(-50%) translateY(-50%); */
    text-align: center;
}
footer{
    background-color: rgba(110,133,156,0.15);
    padding: 10px;
    margin: 5px 0 0 ;
}
.wrap{
    min-height: calc(100vh - 88px);
}

.moody{
    color: rgb(226, 101, 101);
}
/* flip cards flowers */

 .card{
    perspective: 700px;
    text-align: center;
    transition: transform 1s ease-in-out;
    transform-style: preserve-3d;

  }


  .card:hover{
   transform: rotateY(180deg);
  }

  .side-a,
  .side-b{
    backface-visibility: hidden;
    text-align: center;
  }

  .side-b{
    transform: rotateY(-180deg);
    color: black;
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px; 
    left: 10px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex; /* For centering text inside .photo-overlay */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 18px;
  } 



/* Media Queries */
@media(min-width: 768px){

        .nav{
            margin-top: 3em;
          flex-direction: row;
          justify-content: space-between;
}
        h2{
            font-size: 3em;
            position: fixed;
        left: 50%;
        top:56%;
        transform: translateX(-50%) translateY(-50%);
}
      h3{  position:fixed;
        font-size: 2.5em;
        left: 50%;
        top:55%;
        transform: translateX(-50%) translateY(-50%);

}
.grid{
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px minmax(150px ,auto) ;
    grid-template-areas: 
    " callcenter phone message" 
    "call address"
    ;
}
}

     @media(min-width: 1025px){
        .main-header{flex-direction: row;
        }
        .site-logo{
            margin-right: auto;
        }
        .nav{
            margin-top: 0;
            align-self: center;
        }
        .nav li{
            margin-left: .65em;
            margin-right: .65em;
        }
       h2{ 
        font-size: 3em;   
        position: absolute;
         left: 50%;
        top:47%;
        transform: translateX(-50%) translateY(-50%);
       }
      h3{ 
          font-size: 2.5em;
          position: absolute;
         left: 50%;
            top:46%;
                 transform: translateX(-50%) translateY(-50%);
      }
      .grid{
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 100px  minmax(150px ,200px) ;
        grid-template-areas: 
        " callcenter phone message" 
        "call address";
    }
    .gallery{
        max-width: 1000px;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: 
        "redroses whitesroses sunflower " 
        "lillies daisy carnations";
    }

}





/* Grid contact */
.grid{
   max-width: 1000px ;
   margin: 45px auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(200px, auto);
    grid-gap: 10px;
   grid-template-areas: 
   "phone"
   "message"
   "callcenter"
   "address"
   "call"
   ;
}


.phone{
    /* grid-column: 1/2;
    grid-row: 2/3; */
    grid-area: phone ;
   background-color: rgb(233, 90, 90);
}
.call{
    /* grid-column: 2/3;
    grid-row: 2/3; */
    grid-area: call ;
    background-color:rgb(233, 90, 90);
}

.message{
    /* grid-column: 3/4;
    grid-row: 2/3; */
    grid-area: message;
     background-color: rgb(233, 90, 90);
}

.address{
    /* grid-column: 4/5;
    grid-row: 2/3; */
    grid-area: address ;
    background-color: rgb(233, 90, 90);
}

.call-center{
    /* grid-column: 1/5;
    grid-row: 1/2; */
    grid-area: callcenter ;
    background-color: rgb(233, 90, 90);
}
.grid > * {
    font-family: 'Xanh Mono', monospace;
    padding: 0.85em;
    text-align: center;
  }

/* Image Gallery */

.gallery{

    display: grid;
    grid-template-columns: 1fr;
    max-width: 800px;
    grid-template-rows: .5fr .5fr ;
    grid-gap: 10px;
    margin: 45px auto;
    grid-template-areas: 
    "whiteroses"
    "redroses"
    "sunflower"
    "lillies"
    "daisy"
    "carnartions"
    ;
}
.gallery > * {
    font-family: 'Xanh Mono', monospace;
    padding: 0.85em;
    border: solid 4px rgba(110,133,156,0.15);
  }

.white_roses{
    /* grid-column: 1/2; */
    grid-area: whiteroses;
}

.red_roses{
    /* grid-column:2/3 ; */
    grid-area: redroses;
}

.sunflower{ 
    /* grid-column: 3/4; */
    grid-area: sunflower;
}
.lillies{ 
    /* grid-column: 4/5; */
    grid-area: lillies;
}
    .daisy{ 
    /* grid-row: 2/3; */
    grid-area: daisy;
}
.carnations{
     /* grid-row: 2/3;
     grid-column: 2/3; */
     grid-area: carnations;
}
```CSS
Muaaz Matwadia
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Muaaz Matwadia
Full Stack JavaScript Techdegree Graduate 19,327 Points
Muaaz Matwadia
.a{fill-rule:evenodd;}techdegree seal-36
Muaaz Matwadia
Full Stack JavaScript Techdegree Graduate 19,327 Points

In the flower gallery i want the grid to display 4 columns and 2 rows for big screens Thanks!

Jeremy Caudle
Jeremy Caudle
23,719 Points
Jeremy Caudle
Jeremy Caudle
23,719 Points

Hi Azzie,

I think you had the right code already in your CSS file, but there are other styles overriding your media query for big screens further down within the CSS file. If you move the media query shown below (or all your media queries) to the bottom of the your CSS file, the grid displays 4 columns and 2 rows for big screens. 

@media(min-width: 1025px){
    .main-header{flex-direction: row;
    }
    .site-logo{
        margin-right: auto;
    }
    .nav{
        margin-top: 0;
        align-self: center;
    }
    .nav li{
        margin-left: .65em;
        margin-right: .65em;
    }
   h2{ 
    font-size: 3em;   
    position: absolute;
     left: 50%;
    top:47%;
    transform: translateX(-50%) translateY(-50%);
   }
  h3{ 
      font-size: 2.5em;
      position: absolute;
     left: 50%;
        top:46%;
             transform: translateX(-50%) translateY(-50%);
  }
  .grid{
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px  minmax(150px ,200px) ;
    grid-template-areas: 
    " callcenter phone message" 
    "call address";
}
.gallery{
    max-width: 1000px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
    "redroses whitesroses sunflower " 
    "lillies daisy carnations";
}

}

I hope this helps you out. Good luck!

Muaaz Matwadia
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Muaaz Matwadia
Full Stack JavaScript Techdegree Graduate 19,327 Points
Muaaz Matwadia
.a{fill-rule:evenodd;}techdegree seal-36
Muaaz Matwadia
Full Stack JavaScript Techdegree Graduate 19,327 Points

Thank you so much it worked i forget about that.

Muaaz Matwadia
.a{fill-rule:evenodd;}techdegree seal-36
Muaaz Matwadia
Full Stack JavaScript Techdegree Graduate 19,327 Points

Hi, I need help please .grid doesn't work in media queries and my nav doesnt switch to column on mobile devices. Thanks!