Есть ли способ вставить строку, и CSS знает, как поместить ее в конец строки в системе сетки? - PullRequest
Новая
       7

Есть ли способ вставить строку, и CSS знает, как поместить ее в конец строки в системе сетки?

1 голос
/ 16 июня 2020

** Edit 18-06-2020 - Я нашел ответ перейти на новую строку с помощью гибкого блока

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

Я прикрепление изображения, чтобы я мог лучше объяснить.

The calendar view in grid system

Допустим, я вставил <div> между 3 и 4, оставшаяся таблица сдвинется вниз на 300 пикселей, даже если я этого не сделал » t вставьте его в конец сетки. Первая строка останется на месте, остальная часть таблицы должна сдвинуться вниз на 300 пикселей. То же и с остальными.

Мой html с кнопками дней выглядит так: 

<div class="days">
<div role="button" class="day-button otherMonth ">25</div>
<div role="button" class="day-button otherMonth ">26</div>
<div role="button" class="day-button otherMonth ">27</div>
<div role="button" class="day-button otherMonth ">28</div>
<div role="button" class="day-button otherMonth ">29</div>
<div role="button" class="day-button otherMonth ">30</div>
<div role="button" class="day-button  ">1</div>
<div role="button" class="day-button  ">2</div>
...
<div role="button" class="day-button  ">30</div>
<div role="button" class="day-button  ">31</div>
<div role="button" class="day-button otherMonth ">1</div>
<div role="button" class="day-button otherMonth ">2</div>
<div role="button" class="day-button otherMonth ">3</div>
<div role="button" class="day-button otherMonth ">4</div>
<div role="button" class="day-button otherMonth ">5</div>
</div>

Мой стиль сетки css

grid-display{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    column-gap: 0px;
    row-gap: 1em;
    justify-items: center;
}

Код JSBIN

Действительно ли мне нужно создавать контейнеры для каждой строки таблицы?

Есть ли способ, которым CSS знает, как вставить элемент в конец ряд?

1 Ответ

0 голосов
/ 18 июня 2020
...