Строка столбца сетки с использованием свойства Display GRID

Question

Здесь, в этом коде, я хочу понять, что указывают grid-column-start и grid-column-end?

Это часть HTML моего кода.

<div class="grid-container">
<div class="grid-item1">1</div>
<div class="grid-item2">2</div>
<div class="grid-item3">3</div>  
<div class="grid-item3">4</div>
<div class="grid-item5">5</div>
<div class="grid-item6">6</div>  
<div class="grid-item7">7</div>
<div class="grid-item8">8</div>
<div class="grid-item9">9</div>  

Это часть CSS моего кода.

.grid-container 
 {
 display: grid;
 grid-template-columns: 100px 100px 100px;
 grid-gap : 50px;
 background-color: black;
 padding: 10px;
 }
 div 
 {
 background-color: rgba(255, 255, 255, 0.8);
 border: 1px solid rgba(0, 0, 0, 0.8);
 padding: 15px;
 font-size: 30px;
 text-align: center;
 }
.grid-item1
{
grid-column-start : 1 ;
grid-column-end : 3;
}

Это вывод кода. Итак, что здесь указывает grid-column-end?

Answer 1

Итак, что он в основном делает, когда вы даете grid-column-start : 1| grid-column-end : 3. Столбец будет начинаться с первой позиции и охватывать столбец 3.

Сокращенный метод этого будет grid-column: 1 / 3;, который начинается с 1 и заканчивается в столбце 3, что заставит другие столбцы двигаться.

Смотрите примеры здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column

Надеюсь, это поможет.

Answer 2

Чтобы понять, что делает свойство grid-template-column , выберите Chrome DevTools и проверьте «grid-item1». Более короткий метод: grid-column: 1/3; - разделение между двумя столбцами; начиная с первой строки и заканчивая третьей -> | col | col | Вместо использования пикселей в свойстве grid-template-columns , я предлагаю использовать это, чтобы избежать отсутствия ответа: grid-template-columns: repeat(12/1fr); или же grid-template-columns: repeat(auto-fit, minmax(250px, 1fr);

Answer 3

Свойство grid-column-start определяет, с какой строки столбца будет начинаться элемент. и

Свойство grid-column-end определяет, сколько столбцов будет охватывать элемент, или на какой строке столбца элемент будет заканчиваться.

Пожалуйста, посмотрите на следующие два примера: 1- grid-column-start 2- grid-column-end