Question

Closed. This question needs debugging details. It is not currently accepting answers.

Closed 9 hours ago.

I want to create a flex (or maybe a grid or bootstrap) (I want to use white space as well, about 40px) From 5 to 3 top and 2 bottom (middle) and change to 1 big card and 2 small cards per row. What should I do to find the best way? I m not sure which method is best. Or which method is correct? While I m building a website It s like I did it the wrong way. And my work didn t turn out very well.

My problem is the dynamics and width of the card when reducing the screen size. I would like the card to be able to reduce its width a bit before changing the format. What I do now is I write 5 cards to use. Justify content center with media query (used to reduce the width of the flex container, causing the card to drop to the bottom) There are always a lot of problems and I don t know how to deal with them. (Dynamic even numbers and odd numbers are displayed differently)

demo

Answer 1

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  font-family: Arial, Helvetica, sans-serif;
}

.wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  max-width: 1200px;
  width: 100%;
  padding: 30px;
  margin: auto;
}

.wrap .box{
  flex: 1;
  border: 1px solid #000;
  background: #ddd;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* responsive */

/* on tablet */
@media(max-width: 767px){
  .wrap .box{
    flex: none;
    width: calc(33.3333333% - 40px);
  }
}

/* on phone */
@media(max-width: 576px){
  .wrap{
    gap: 30px;
  }
  .wrap .box{
    max-height: 300px;
    width: calc(50% - 15px);
  }
  .wrap .box-1{
    width: 100%;
    aspect-ratio: 1 / .5;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div class="wrap">
    <div class="box box-1">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
  </div>

</body>
</html>

友情链接