Адаптивная Верстка - помогите с практикой

Question

Изучил более менее Html & css, практиковался на статичных сайтах. Теперь хочу начать изучать адаптивную верстку. Перечитал пару десятков сайтов об этом, и до меня плохо доходит. Может, кто скинуть максимально простой макет с адаптивной версткой, просто одни блоки, без надписей, картинок и прочего, теорию знаю но на практике не могу ее применить, буду очень благодарен.

Answer 1

Что-то с флексами

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
}

img {
  display: block;
  max-width: 100%;
}

.container {
  display: block;
  max-width: 1000px;
  width: 100%;
  padding: 0 10px;
  margin: 0 auto;
}

.card__container {
  display: flex;
  flex-wrap: wrap;
}

.card__item>*+* {
  margin-top: 10px;
}

.card__item {
  width: calc(33.33% - 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 10px 30px 10px;
}

@media (max-width: 600px) {
  .card__item {
    width: calc(50% - 20px);
  }
}

@media (max-width: 400px) {
  .card__item {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

<div class="container">
  <div class="card__container">

    <div class="card__item">
      <div class="card__title">
        Заголовок
      </div>
      <div class="card__img">
        <img src="https://picsum.photos/200/200">
      </div>
    </div>

    <div class="card__item">
      <div class="card__title">
        Заголовок
      </div>
      <div class="card__img">
        <img src="https://picsum.photos/200/200">
      </div>
    </div>

    <div class="card__item">
      <div class="card__title">
        Заголовок
      </div>
      <div class="card__img">
        <img src="https://picsum.photos/200/200">
      </div>
    </div>

    <div class="card__item">
      <div class="card__title">
        Заголовок
      </div>
      <div class="card__img">
        <img src="https://picsum.photos/200/200">
      </div>
    </div>

    <div class="card__item">
      <div class="card__title">
        Заголовок
      </div>
      <div class="card__img">
        <img src="https://picsum.photos/200/200">
      </div>
    </div>

  </div> <!-- .card__container -->
</div> <!-- .container -->

Что-то с гридами

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
}

img {
  display: block;
  max-width: 100%;
}

.container {
  display: block;
  max-width: 1000px;
  width: 100%;
  padding: 0 10px;
  margin: 0 auto;
}

.card__container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 200px));
  grid-gap: 15px;
  justify-content: center;
}

.card__item>*+* {
  margin-top: 10px;
}

.card__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

<div class="container">
  <div class="card__container">

    <div class="card__item">
      <div class="card__title">
        Заголовок
      </div>
      <div class="card__img">
        <img src="https://picsum.photos/200/200">
      </div>
    </div>

    <div class="card__item">
      <div class="card__title">
        Заголовок
      </div>
      <div class="card__img">
        <img src="https://picsum.photos/200/200">
      </div>
    </div>

    <div class="card__item">
      <div class="card__title">
        Заголовок
      </div>
      <div class="card__img">
        <img src="https://picsum.photos/200/200">
      </div>
    </div>

    <div class="card__item">
      <div class="card__title">
        Заголовок
      </div>
      <div class="card__img">
        <img src="https://picsum.photos/200/200">
      </div>
    </div>

    <div class="card__item">
      <div class="card__title">
        Заголовок
      </div>
      <div class="card__img">
        <img src="https://picsum.photos/200/200">
      </div>
    </div>

  </div> <!-- .card__container -->
</div> <!-- .container -->

БЛОГ НА HUSL

Адаптивная Верстка - помогите с практикой

Ответы (1 шт):