Не понимаю поведение Flex и Grid

Question

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Media Queries: a simple mobile first design, step 1</title>
  </head>
  <style>
    * {
      box-sizing: border-box;
    }

    html {
      font:
        1.2em/1.4 Arial,
        Helvetica,
        sans-serif;
    }

    body {
      padding: 0 0 1em;
    }

    header {
      background-color: #333;
      color: #fff;
      border: 5px solid #000;
    }

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

    header a {
      color: #fff;
      text-decoration: none;
      display: block;
      padding: 0.5em 1em;
      border-top: 1px solid #999;
    }

    header .title {
      font-size: 150%;
      font-style: italic;
      font-weight: bold;
      padding: 1em;
    }

    main {
      padding: 0 1em;
    }

    .cards {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .cards li {
      border: 5px solid #000;
      margin-bottom: 1em;
    }

    .cards h2 {
      background-color: #333;
      color: #fff;
      margin: 0;
      padding: 0.5em 1em;
    }

    .cards .inner {
      padding: 0.5em 1em;
    }

    .sidebar {
      background-color: #333;
      border: 5px solid #000;
      padding: 0.5em 1em;
      color: #fff;
    }

    @media screen and (min-width: 70em) and (orientation: landscape) {
      header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }

      header ul{
        display: flex ;
        flex-direction: row;
        justify-content: flex-end;
      }

      header a {
        border: none;
      }
      
      main {
        display: grid;
        grid-template-columns: 3fr 1fr;
        grid-gap: 20px;
        margin-top: 1em;
      }

      .cards{
        width: 400px;
      }
    }
  </style>
</head>

<body>
  <header>
    <div class="title">My Website</div>
    <nav>
      <ul>
        <li>
          <a href="">Link 1</a>
        </li>
        <li>
          <a href="">Link 2</a>
        </li>
        <li>
          <a href="">Link 3</a>
        </li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h1>This is the main heading</h1>
      <p>
        Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh
        onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
      </p>

      <p>
        Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot
        courgette tatsoi pea sprouts fava bean collard greens dandelion okra
        wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
      </p>

      <ul class="cards">
        <li>
          <h2>Card One</h2>
          <div class="inner">
            <p>
              Turnip greens yarrow ricebean rutabaga endive cauliflower sea
              lettuce kohlrabi amaranth water spinach avocado.
            </p>
          </div>
        </li>
        <li>
          <h2>Card Two</h2>
          <div class="inner">
            <p>
              Daikon napa cabbage asparagus winter purslane kale. Celery
              potato scallion desert raisin horseradish spinach carrot soko.
            </p>
          </div>
        </li>
        <li>
          <h2>Card Three</h2>
          <div class="inner">
            <p>
              Lotus root water spinach fennel kombu maize bamboo shoot green
              bean swiss chard seakale pumpkin onion chickpea gram corn pea.
            </p>
          </div>
        </li>
        <li>
          <h2>Card Four</h2>
          <div class="inner">
            <p>
              Lotus root water spinach fennel kombu maize bamboo shoot green
              bean swiss chard seakale pumpkin onion chickpea gram corn pea.
            </p>
          </div>
        </li>
        <li>
          <h2>Card Five</h2>
          <div class="inner">
            <p>
              Nori grape silver beet broccoli kombu beet greens fava bean
              potato quandong celery. Bunya nuts black-eyed pea prairie turnip
              leek lentil turnip greens parsnip.
            </p>
          </div>
        </li>
      </ul>
    </article>
    <aside class="sidebar">
      <p>
        Have you discovered all of the other excellent content on this
        website?
      </p>
    </aside>
  </main>
</body>
</html>

Изучал адаптивную верстку и скажем так решил заодно повторить Flex и Grid. Но столкнулся с проблемами, которые скорее всего элементарно решаются и что я просто не вижу ошибки.

В CSS коде в @media список тега почему-то не становится в правую часть экрана, хотя я ему это объявляю. И Карточки должны идти по порядку и если не хватает места переходить на новый ряд. Я подумал сначала использовать display: flex для них, но не помогло и я подумал зачем объявлять карточка display:flex, если они наследуют grid, но там у меня тоже ничего не получилось.

Как выглядит у меня:

Как должно выглядеть:

Помогите пожалуйста, буду очень благодарен

Answer 1

Получилось решить данные проблемы.

main сделал

 main {
    display: grid;
    margin-top: 1em;
    grid-template-columns: 3fr 1fr;
    grid-gap: 20px;
  }

cards inner сделал:

.cards, .inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 20px;
  }

Результат:

БЛОГ НА HUSL

Не понимаю поведение Flex и Grid

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