Как сделать чтобы было по 2 блока в строке?

Question

[Danil2134]

Уже и пробовал flex-wrap:wrap( Но мне не нужно чтобы было по одному блоку на строке, нужно чтобы было по 2 блока на строке.

<section class="Lots-of-blocks">
          <div class="container">
            <div class="lots-of-block_blocks">
              <div class="lots-of-block_window">
                <img
                  class="lots-of-block_img"
                  src="images/imgcrem1.jpeg"
                  alt=""
                />
              </div>
              <div class="lots-of-block_window">
                <p class="lots-of-block_pretitle">High Performance</p>
                <h2 class="lots-of-block_title">It works, we pinky promise.</h2>
                <p class="lots-of-block_main-text">
                  We know that if your personal care products don't make your
                  hair and skin feel amazing, nothing else matters.
                </p>
                <p class="lots-of-block_additional-text">
                  We have high expectations of our hair and body care and our
                  formulas won't disappoint. From a deep cleansing lather to our
                  signature fresh scent, we've captured the sensorial shower
                  experience you love.
                </p>
                <a href="" class="lots-of-block_link"></a>
              </div>
              <div class="lots-of-block_window">
                <p class="lots-of-block_pretitle"></p>
                <h2 class="lots-of-block_title"></h2>
                <p class="lots-of-block_main-text"></p>
                <p class="lots-of-block_additional-text"></p>
                <a href="" class="lots-of-block_link"></a>
              </div>
              <div class="lots-of-block_window"></div>
              <div class="lots-of-block_window">
                <img
                  class="lots-of-block_img"
                  src="images/imgcrem2.jpeg"
                  alt=""
                />
              </div>
              <div class="lots-of-block_window">
                <p class="lots-of-block_pretitle"></p>
                <h2 class="lots-of-block_title"></h2>
                <p class="lots-of-block_main-text"></p>
                <p class="lots-of-block_additional-text"></p>
                <a href="" class="lots-of-block_link"></a>
              </div>
            </div>
          </div>
        </section>

.Lots-of-blocks {
  height: 1950px;
}

.lots-of-block_blocks {
  display: flex;
  max-width: 100%;
}

.lots-of-block_window {
  flex-shrink: 0;

  width: 600px;
  height: 650px;
  background-color: #fbf6f0;
}

Comments

[FeST1VaL]

не понятно чего вы хотите добиться... flex-wrap: wrap; правильно работает, может у вас размеры контейнера меньше чем влезает. Т.е у вас если контейнер 1200px и блоки по 600px без margin, то блоки встанут по 2.

Так же хочу заметить, использование height повсеместно не очень

Answer 1

[nikmil]

display: grid;
grid-template-columns: repeat(2, auto);

Вот и получается две колонки.
Надеюсь правильно тебя поняла.