Область сетки CSS смещает другие области в зависимости от содержимого

Таким образом, у меня, кажется, возникает эта проблема каждый раз, когда я начинаю новый проект с сеткой CSS, а это - 1 область сетки, уменьшающая другую область сетки в зависимости от размера содержимого.

Я делал это в прошлом, но не помню, как мне это удалось. Кто-нибудь может помочь мне с этим?

body {
  background-color: #292929;
  /*#333333 is a lighter charcoal color go to https://encycolorpedia.com/333333 to play around with shades*/
  font-family: Acme;
  color: white;
}

* {
  box-sizing: border-box;
}


/*Main Grid Container*/

#main-grid {
  display: grid;
  grid-template-areas: 'calendar calendar displaylist displaylist'
}


/*Child of Main Grid Container*/

#calendarFavs {
  grid-area: calendar;
}

#displayedList {
  grid-area: displaylist;
}

<body>

  <h1>Hello World</h1>

  <div id='main-grid'>
    <!--Calendar grid containers and its children -->
    <div id='calendarFavs'>
      <h1>Calendar</h1>
    </div>
    <!-- End of calendar grid containers and its children -->

    <div id='displayedList'>
      <h1>List</h1>
    </div>

  </div>
</body>

ваш код не воспроизводит то, что вы говорите, не могли бы вы проверить еще раз?

— 25.03.2019 05:53

html css

25.03.2019 05:30

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 1

забыл добавить:

grid-template-columns: 1fr 1fr;

Флаг «не ответ» не означает ответ неправильный, @kukkuz. Это означает «не попытка ответить на вопрос». Если ответ неправильный, вы должны проголосовать за него, а не помечать. См. часто задаваемые вопросы по мета. Модераторы не судят о технической точности.

— 25.03.2019 06:01

25.03.2019 05:33