Div с указанием c ширина и высота в зависимости от контейнера

Question

У меня есть два Календара рядом, и все выглядит хорошо, используя сетку css. Awesome1 Моя проблема сейчас заключается в том, что я хочу повторить каждый 31 раз, просто скопировав / вставив ниже на html и каким-то образом, используя javascript заполнить область, но позволяя только 7 делений в строке и 5 строк, заполняя все пространство их контейнер

Может кто-нибудь подсказать, как его решить? Я не хочу делать это с сеткой, хочу это с javascript и генерировать на основе этого :) 7 х 5 блоков (ширина х высота), дающих каждому blockCalendarBox динамическую ширину и высоту?

С уважением!

.dashboardContentInnerWrapper {
  height: 300px;
  background-color:red;
}

.grid-container {
    display: grid;
    height: 100%;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.2fr 1.8fr;
    grid-template-areas: "reportTitle reportTitle" "blockOne blockTwo";
}

.blockStyle {
    background-color: white;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.20);
    -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.20);
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.20);
}

.blockTitleArea{
    width: 100%;
    height: 25px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.reportTitle { 
    grid-area: reportTitle; 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.blockOne { 
    grid-area: blockOne; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.color1 {
    background-color: #333333;
    color: #ffffff;
}

.blockCalendarWrapper {
    position: relative;
    width: 100%;
    height: calc(100% - 25px);
}

.blockCalendarBox {
    position: relative;
    background-color: green;
    width:20px;  
    height:20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

<div class="dashboardContentInnerWrapper">
            <div class="grid-container">
              <div class="reportTitle subtitle">Report / March 2020</div>
            
              <div class="blockOne blockStyle">
                <div class="blockTitleArea color1">FIRST CALENDAR</div>
                <div class="blockCalendarWrapper">
                    <div class="blockCalendarBox">1</div>
                </div>
              </div>
              
              <div class="blockTwo blockStyle">
                <div class="blockTitleArea color1">SECOND CALENDAR</div>
                <div class="blockCalendarWrapper">
                    <div class="blockCalendarBox">1</div>
                </div>
              </div>
              
            </div>
</div>

Answer 1

Я не уверен, что это решит ваш вопрос.

.blockCalendarWrapper {
    position: relative;
    width: 100%;
    height: calc(100% - 25px);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

, если вы хотите использовать css на каждом поле.

.blockCalendarBox {
    position: relative;
    background-color: green;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    display: inline-flex;
    width: calc(100% / 7);
    height: calc(100% / 5);
    text-align: center;
}

, если вы хотите использовать javascript для ширины и высоты вы можете получить контейнер и разделить его на 7 по ширине.

Надеюсь, это решит вашу проблему.