html – Why is my grid display in vertical instead of horizontal?


I want to create image card in grid view. But the grid display as vertical instead of horizontal. The online tutorial I followed is https://www.youtube.com/watch?v=L2o0Fp2gQEo

This is my html:

         <div class="card">
           <img src="image/singapore.jpg">
           <div class="content">
             <h2>Singapore</h2>
             <h3>Scenario</h3>
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dignissimos, minus aperiam adipisci exercitationem.</p>
             <a href="page2.html" class="button">Read more</a>
           </div>
         </div>

         <div class="card">
          <img src="image/newyork.jpg">
          <div class="content">
            <h2>New York</h2>
            <h3>Scenario</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dignissimos, minus aperiam adipisci exercitationem.</p>
            <a href="page2.html" class="button">Read more</a>
          </div>
        </div>

        <div class="card">
          <img src="image/las vegas.jpg">
          <div class="content">
            <h2>Las Vegas</h2>
            <h3>Scenario</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dignissimos, minus aperiam adipisci exercitationem.</p>
            <a href="page2.html" class="button">Read more</a>
          </div>
        </div>
       </div>
.cards{
  box-sizing: border-box;
    width: 75%;
    margin: 50px auto;
    display: grid;
    place-items: center center;
    grid-template-columns: repeat (auto-fill, minmax(40px,1fr) );
    grid-gap: 30px;
}






Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here