Задать вопрос
@r_r_r_r_r
html

Не выставляются карточки с помощью gap так как надо?

Свойство gap работает не так как надо , прикладываю скриншоты того как должно быть и как сделалось. 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Burger Landing</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="header">
    <div class="container">   
    <img src="images/icons/logo.png" alt="Логотип" class="header__logo">
      <nav class="header__nav">
        <ul class="header__list">
          <li><a class="active" href="#!">HOME</a></li>
          <li><a class="" href="#!">PAGES</a></li>
          <li><a class="" href="#!">OUR OFFER</a></li>
          <li><a class="" href="#!">PRICING</a></li>
          <li><a class="" href="#!">SHOP</a></li>
        </ul>
      </nav>
      <a href="#!" class="btn">Order now</a>
    </div>
  </header>
  
  <main class="main">
    <section class="welcome">
      <div class="container">
        <div class="welcome__text">
          <h4 class="welcome__subtitle">FAST FOOD BURGERS</h4>
          <h1 class="welcome__title">The fastest food, for instant hunger.</h1>
          <p class="welcome__desc">Some food has looked so awful that it's
             looked like something that the dog's brought home, yet after one
             mouthful I've been left eating my thoughts, my words & my food and
              gone back for seconds.</p>
          <a href="#!" class="btn">Order now</a>
        </div>
        
      </div>
    </section>

  <section class="food-list">
    <div class="container">
  
      <div class="food-list_card">
      <img src="./images/food-list-1.jpg" alt="" class="food-list_img">
      <div class="food-list__text-wrapper"><h4 class="food-list__title">Chicken Paella</h4>
        <p class="food-list__desc">We just don't make and sell food. Good food warms.</p>
    </div>

    </div>
  
    <div class="food-list_card">
      <img src="./images/food-list-2.jpg" alt="" class="food-list_img">
      <div class="food-list__text-wrapper"><h4 class="food-list__title">Taco Del Mar</h4>
        <p class="food-list__desc">Taco Del Mar brings the best out of Mexican cuisine with fresh.</p>
  </div>

    </div>
  
    <div class="food-list_card">
      <img src="./images/food-list-3.jpg" alt="" class="food-list_img">
      <div class="food-list__text-wrapper">
      <h4 class="food-list__title">Bon Au Pain</h4>
      <p class="food-list__desc">Bon Au Pain is a pioneer in the healthy fast food scene.</p>
    </div>

    </div>
  
    <div class="food-list_card">
      <img src="./images/food-list-4.jpg" alt="" class="food-list_img">
      <div class="food-list__text-wrapper">
      <h4 class="food-list__title">Pizza Hut.</h4>
      <p class="food-list__desc">Although the Pizza Hut Menu Prices have tumbled over the years.</p>
    </div>
</div>
</div>
</section>

<section class="order">
<div class="container">
<img src="./images/burger.png" alt="" class="order__img">
<div class="order__text">
  <h3 class="order__title">Burger King</h3>
  <p class="order__desc">Together with McDonald’s, Burger King has 
  grown to become synonymous with burgers in the US.</p>
  <span class="order__price">$6</span>
  <span class="order__price order__price--old">$8</span>
  <a href="#!" class="btn">Order now</a>
</div>
</div>
</section>
<section class="product">
  <div class="container">
    <div class="product_card card-queen">
      <h4 class="product_title">Dairy Queen</h4>
      <p class="product_desc">Dairy Queen is one of the biggest fast-food.</p>
      <span class="product__price">$4</span>
  <span class="product__price product__price--old">$6</span>
  <a href="#!" class="btn">Order now</a>
    </div>
    <div class="product_card card-hut">
      <h4 class="product_title">Pizza Hut</h4>
      <p class="product_desc">Although the Pizza Hut Menu Prices.</p>
      <span class="product__price">$3</span>
  <span class="product__price product__price--old">$7</span>
  <a href="#!" class="btn">Order now</a>
    </div>
    <div class="product_card card-king">
      <h4 class="product_title">Burger King</h4>
      <p class="product_desc"> Together with McDonald’s, Burger King.</p>
      <span class="product__price">$3</span>
  <span class="product__price product__price--old">$7</span>
  <a href="#!" class="btn">Order now</a>
    </div>
    <div class="product_card card-papa">
      <h4 class="product_title">Papa John’s</h4>
      <p class="product_desc">Papa John’s is one of the most popular fast-food.</p>
      <span class="product__price">$4</span>
  <span class="product__price product__price--old">$6</span>
  <a href="#!" class="btn">Order now</a>
    </div>
  </div>
</section>
</main>
  
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
 
body {
  margin: 0;
  font-family: "Roboto", serif;
  background-color: #1c1c1c;
  color: #fff;
 
   
}

a {
color: #fff;
text-decoration: none;
}

p{
  margin: 0;
}

p + p {
  margin-top: 15px;
}

ul {
list-style: none;
padding: 0;
margin: 0;
}

img {
  max-width: 100%;
}

h1,h2,h3,h4,h5,h6 {
font-weight: 500;
margin: 0;
}

.container {
box-sizing: border-box;


max-width: 1140px;
margin-left: auto;
margin-right: auto;
padding: 0 15px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;

 font-weight: 500;
 font-size: 16px;
 text-transform: uppercase;

 width: 165px;
 height: 50px;

 background: #f6762c;
 border-radius: 5px;
 transition: opacity 0.3s;
}


.btn:hover {
  opacity: 0.8;
}



.header {
padding: 25px 0;
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.header__logo {

}


.header__nav {

}



.header__list {
 display: flex;
 gap: 30px;
}

.header__nav a {
  font-size: 14px;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.header__nav a.active {
  opacity: 1;
}

.header__nav a:hover {
  opacity: 0.9;

}


.main {

}


.welcome {
  min-height: 100vh;
  margin-top: -100px;
  padding: 240px 0;

  background-image: url("./images/welcome-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

}
.welcome__text {
width: 550px;
}

.welcome__subtitle {
margin-bottom: 7px;

font-size: 14px;
letter-spacing: 0.1em;
}

.welcome__title {
  font-size: 58px;
}

.welcome__desc {
margin: 40px 0;

font-size: 18px;
opacity: 0.7;
}

.btn {


}

.food-list {
 padding: 100px 0;

}


.food-list .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.food-list_card {
  width: 260px;

  overflow: hidden;

  text-align: center;

  background: #312f30;
  border-radius: 10px;
}
.food-list_img {
  width: 100%;
  height: 175px;
  object-fit: cover;
}

.food-list__text-wrapper {

  padding: 30px 20px;

}

.food-list__title {
 margin-bottom: 20px;
font-size: 20px;
}
.food-list__desc {
 font-size: 16px;
 opacity: 0.7;
}

.order {
background: #312f30;
padding: 60px 0;
}

 .order .container {
 display: flex;
 justify-content: space-between;
 align-items: center;

 padding-right: 200px;


}

.order__img {
max-width: 470px;
}

.order__text {
max-width: 360px;
}

.order__title {
  font-size: 44px;
  margin-bottom: 25px;
}

.order__desc {
margin-bottom: 15px;
opacity: 0.7;
}

.order__price {
font-weight: 500;
font-size: 20px;
letter-spacing: 0.1em;
color:#f6762c;
}

.order__price--old {
font-size: 16px;
text-decoration-line: line-through;
opacity: 0.5;
}

.order__price + .order__price {
margin-left: 3px;
}

 .order .btn {
  margin-top: 10px;

}



.product .container {
 display: flex;
 flex-wrap: wrap;
 gap: 30px;
 
}


.product_card {
box-sizing: border-box;
width: 555px;
min-height: 300px;

padding: 60px 25px 60px 290px;
}

.product_card:nth-child(even) {
padding-left: 30px;
padding-right: 290px;

}
.product_title {
  margin-bottom: 20px;
  font-size: 30px;
}
.product_desc {
margin-bottom: 10px;
opacity: 0.7;
}
.product__price {
font-weight: 500;
letter-spacing: 0.1em;
color:#f6762c;
}

.product__price + .product__price {
  margin-left: 5px;

}


.product__price--old {
text-decoration-line: line-through;
opacity: 0.5;
}
.btn {
width: 140px;
height: 40px;
font-size: 12px;
}
.product .btn {
margin-top: 10px;
}

.card-queen {
  background-image: url("./images/product-1.jpg");
}

.card-hut {
  background-image: url("./images/product-2.jpg");
}

.card-king {
  background-image: url("./images/product-3.jpg");
}

.card-papa {
  background-image: url("./images/product-4.jpg");
}

67acf7b2e7447580232911.png
67acf7bb14e73589458800.png
  • Вопрос задан
  • 17 просмотров
2 комментария
Подписаться 1 Простой 2 комментария
Пригласить эксперта
Ответы на вопрос 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Свойство gap работает не так как надо

На обоих скриншотах одинаковый gap и по виду очень похож на указанные 30px.
А больше он ничего не делает.

Но предположим, что вы хотели спросить не про gap, а про почему не получилось два столбца.
Теперь смотрим в код (было бы идеально, если бы к коду прикладывалась песочница, в которую можно потыкать, а эти простыни убирались в спойлеры).
Вы пишете: хочу флекс, по строкам, если не влезло, то переноси и сделай отступы (этот ваш gap) 30px.
Смотрим на элемент: ширина 555px.
Смотрим на контейнер: ширина 1140 и отступы 2х15.

Считаем:
Свободное место в контейнере: 1140 - 30 = 1110.
Сколько нужно места хотели бы занять два элемента в ряду: 555х2 + 30 = 1140
=> Не влезает.

А раз не влезает, то переносим.

Нормальное решение:
Меняем флекс на грид и задаем две колонки с нужным отступом.
grid-template-columns: 1fr 1fr;
gap: 30px;


Дополнительно можно почитать про minmax в гридах.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Специалист по работе с клиентами (Customer Support)
Designmodo
До 750 $
Ещё вакансии
Заказы с Хабр Фриланса
Консультация и настройка home assistant
13 февр. 2025, в 01:16
3500 руб./в час
Разработать надстройку для Эксель
13 февр. 2025, в 00:07
20000 руб./за проект
Добавить возможность бронировать мероприятие на сайте вордпресс
12 февр. 2025, в 22:08
4000 руб./за проект
Ещё заказы