Укажите другой элемент карты c размер ширины

Question

Я использую сетку css, где у меня есть карточка внутри div боковой панели, которая находится внутри погружения контейнера. Я также использую div внутреннего контейнера, куда я кладу 3 карты. Карта Div боковой панели имеет правильную ширину, но карты внутри внутреннего контейнера не регулируются до 200 пикселей. Как я могу дать карточкам внутреннего контейнера определенную ширину c.

HTML
            <aside class="sidebar">
              <h2><b>Latest Blog Post</b></h2> 
              <div class="card">
                <img class="card-image" src="images/christmas.jpeg" alt="christmas-markets" width="100%">
                <div class="card-text">
                  <p><a href="post.html">German Christmas Markets</a></p> 
                </div>
              </div>
            </aside>
            <article class="main">
              <h1>An American Living in Germany</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
              <div class=".inner-container">
                <div class="card"><img class="card-image" src="images/pubic-transit.jpeg" alt="public-transit" width="100%">
                  <div class="card-text">
                    <p><a href="post.html">Public Transit</a></p> 
                  </div></div>
                <div class="card"><img class="card-image" src="images/rothenburg.jpeg" alt="christmas-markets" width="100%">
                  <div class="card-text">
                    <p><a href="post.html">Rothenburg ob der Tauber</a></p> 
                  </div></div>
                <div class="card"><img class="card-image" src="images/black-forest.jpeg" alt="public-transit" width="100%">
                  <div class="card-text">
                    <p><a href="post.html">The Black Forest</a></p> 
                  </div></div>
              </div>
            </article>

CSS

.card {
    box-shadow: 0 8px 8px 8px rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 90%;
    height: auto;
    border-radius: 5px;
    margin-top: 20px;
  }

  .card-text {
      padding: 2px;
      margin-left: 5px;
      margin-bottom: 2px;
      margin-top: 5px;
      line-height: .5em;
  }

  .card-text a {
      color: crimson;
      font-size: 1.2em;
  }

  .card-image {
    width: 100%;
    bottom: 0px;
  }

.inner-container {
    height: 50%;
    width: 80%;
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 200px 200px 200px;
    grid-template-areas:
    "b b b";
}

.inner-container div {
    grid-area: b;
}

.inner-container .card{
    box-shadow: 0 8px 8px 8px rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 200px;
    height: auto;
    border-radius: 5px;
    margin-top: 20px;
}

.inner-container .card-text {
    padding: 2px;
    margin-left: 5px;
    margin-bottom: 2px;
    margin-top: 5px;
    line-height: .5em;
}

.inner-container .card-text a {
    color: crimson;
    font-size: 1.2em;
}

.inner-container .card-image {
    width: 100%;
    bottom: 0px;
}

Answer 1

В вашем коде есть опечатка, поэтому CSS не срабатывает для этого класса.

<div class=".inner-container">

должно быть

<div class="inner-container">

Также взял на себя смелость добавления grid-area:auto; к css, чтобы он правильно отображался для вас:

Рабочая скрипка: https://jsfiddle.net/ne6vrwyq/

.card {
    box-shadow: 0 8px 8px 8px rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 90%;
    height: auto;
    border-radius: 5px;
    margin-top: 20px;
  }

  .card-text {
      padding: 2px;
      margin-left: 5px;
      margin-bottom: 2px;
      margin-top: 5px;
      line-height: .5em;
  }

  .card-text a {
      color: crimson;
      font-size: 1.2em;
  }

  .card-image {
    width: 100%;
    bottom: 0px;
  }

.inner-container {
    height: 50%;
    width: 80%;
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 200px 200px 200px;
    grid-template-areas:
    "b b b";
}

.inner-container div {
    grid-area: b;
}

.inner-container .card{
    box-shadow: 0 8px 8px 8px rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 200px;
    height: auto;
    border-radius: 5px;
    margin-top: 20px;
    grid-area: auto;
}

.inner-container .card-text {
    padding: 2px;
    margin-left: 5px;
    margin-bottom: 2px;
    margin-top: 5px;
    line-height: .5em;
}

.inner-container .card-text a {
    color: crimson;
    font-size: 1.2em;
}

.inner-container .card-image {
    width: 100%;
    bottom: 0px;
}

  <aside class="sidebar">
              <h2><b>Latest Blog Post</b></h2> 
              <div class="card">
                <img class="card-image" src="images/christmas.jpeg" alt="christmas-markets" width="100%">
                <div class="card-text">
                  <p><a href="post.html">German Christmas Markets</a></p> 
                </div>
              </div>
            </aside>
            <article class="main">
              <h1>An American Living in Germany</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
              <div class="inner-container">
                <div class="card"><img class="card-image" src="images/pubic-transit.jpeg" alt="public-transit" width="100%">
                  <div class="card-text">
                    <p><a href="post.html">Public Transit</a></p> 
                  </div></div>
                <div class="card"><img class="card-image" src="images/rothenburg.jpeg" alt="christmas-markets" width="100%">
                  <div class="card-text">
                    <p><a href="post.html">Rothenburg ob der Tauber</a></p> 
                  </div></div>
                <div class="card"><img class="card-image" src="images/black-forest.jpeg" alt="public-transit" width="100%">
                  <div class="card-text">
                    <p><a href="post.html">The Black Forest</a></p> 
                  </div></div>
              </div>
            </article>