About Lesson
Grid Item:
1.The grid-column Property:
The 'grid-column'
property in CSS is used to define how many columns an element should span within a CSS Grid layout, and where it should start. This property is a shorthand for 'grid-column-start'
and 'grid-column-end'
.
Example 1:
CSS
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto auto;
gap: 5px;
background-color: #dda3e9;
padding: 5px;
}
.grid-container>div {
background-color: rgba(252, 215, 252, 0.8);
text-align: center;
padding: 10px 0;
font-size: 20px;
}
.item1 {
grid-column: 1 / 4;
}
HTML
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
<div class="item11">11</div>
<div class="item12">12</div>
<div class="item13">13</div>
<div class="item14">14</div>
<div class="item15">15</div>
<div class="item16">16</div>
</div>
Output:
Example 2:
CSS
.item1 {
grid-column: 1 / span 4;
}