How to create a responsive card wall layout using HTML and CSS

How to create a responsive card wall layout using HTML and CSS

In modern web design, responsive layout is a very important technology. By using HTML and CSS, we can create a responsive card wall layout that adapts to devices of different screen sizes.

The following will introduce in detail how to create a simple responsive card wall layout using HTML and CSS.

HTML part:

First, we need to set up the basic structure in the HTML file. We can create cards using unordered lists (

) and list items (
• ).

  <ul class="card-wall">
      <li class="card">
          <img src="/static/imghw/default1.png"  data-src="image1.jpg"  class="lazy" alt="Image 1">
          <h3 id="Card">Card 1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </li>
      <li class="card">
          <img src="/static/imghw/default1.png"  data-src="image2.jpg"  class="lazy" alt="Image 2">
          <h3 id="Card">Card 2</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </li>
      <li class="card">
          <img src="/static/imghw/default1.png"  data-src="image3.jpg"  class="lazy" alt="Image 3">
          <h3 id="Card">Card 3</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </li>
      ...
  </ul>

  CSS Section:

  Then we need to style the card and card wall. Here we will use CSS Flexbox layout to achieve responsive effects.

  .card-wall {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
  }
  
  .card {
      width: 300px;
      margin: 10px;
      background-color: #f1f1f1;
      text-align: center;
      padding: 20px;
  }
  
  .card img {
      width: 100%;
  }
  
  @media only screen and (max-width: 768px) {
      .card {
          width: 90%;
      }
  }

  Code explanation:

  • The ".card-wall" class is set to Flexbox layout, so that the cards are arranged in rows and aligned horizontally in the center.
  • The ".card" class sets the card's width, margins, background color, text centering, and padding.
  • The ".card img" class sets the width of the image in the card to 100%.
  • The "@media" query will be applied when the screen width is less than 768px to make the card render better on small screens.

  Using these codes, we can easily create a responsive card wall layout. Regardless of the device used, cards automatically resize and arrange to fit different screen sizes.

  Of course, this is just a simple example. You can enhance the design by adding more cards and using CSS styles.

  Summary:

  In this article, we created a simple responsive card wall layout using HTML and CSS. By using Flexbox layouts and media queries, we can easily adjust the layout to fit devices with different screen sizes.

  This is just the basics of using HTML and CSS to create responsive layouts. You can further learn and practice in depth to achieve more complex and unique design effects.

The above is the detailed content of How to create a responsive card wall layout using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!