<div class="grid--three-uneven">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="video">
<iframe src="https://www.youtube-nocookie.com/embed/TLpCuxFM-AQ" title="YouTube video player" height="315" width="560" frameborder="0" allow="accelerometer;
autoplay;
clipboard-write;
encrypted-media;
gyroscope;
picture-in-picture" allowfullscreen></iframe>
</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
<div class="grid-item">13</div>
<div class="grid-item">14</div>
<div class="grid-item">15</div>
<div class="grid-item">16</div>
<div class="grid-item">17</div>
<div class="grid-item">18</div>
<div class="grid-item">19</div>
<div class="grid-item">20</div>
<div class="grid-item">21</div>
<div class="grid-item">22</div>
<div class="grid-item">23</div>
</div>
{{!-- <div class="grid--{{ name }}"> --}}
<div class="grid--three-uneven">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="video">
<iframe src="https://www.youtube-nocookie.com/embed/TLpCuxFM-AQ" title="YouTube video player" height="315" width="560" frameborder="0" allow="accelerometer;
autoplay;
clipboard-write;
encrypted-media;
gyroscope;
picture-in-picture" allowfullscreen></iframe>
</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
<div class="grid-item">13</div>
<div class="grid-item">14</div>
<div class="grid-item">15</div>
<div class="grid-item">16</div>
<div class="grid-item">17</div>
<div class="grid-item">18</div>
<div class="grid-item">19</div>
<div class="grid-item">20</div>
<div class="grid-item">21</div>
<div class="grid-item">22</div>
<div class="grid-item">23</div>
</div>
{{!-- </div> --}}
{
"gridItems": [
{
"text": "1"
},
{
"text": "2"
},
{
"text": "3"
},
{
"text": "4"
},
{
"text": "5"
},
{
"text": "6"
},
{
"text": "7"
},
{
"text": "8"
},
{
"text": "9"
},
{
"text": "10"
},
{
"text": "11"
},
{
"text": "12"
},
{
"text": "13"
},
{
"text": "14"
},
{
"text": "15"
},
{
"text": "16"
},
{
"text": "17"
},
{
"text": "18"
},
{
"text": "19"
},
{
"text": "20"
},
{
"text": "21"
},
{
"text": "22"
},
{
"text": "23"
},
{
"text": "24"
}
]
}
.grid-item {
background-color: var(--color-anchor);
color: var(--color-white);
border-radius: 5px;
padding: 20px;
font-size: 150%;
height: 200px;
&:nth-child(even) {
background-color: var(--color-cloud);
color: var(--color-charcoal);
}
}
.grid--three-uneven {
display: grid;
grid-template-columns: 1fr 4fr 1fr;
gap: 1rem;
&.video {
grid-column: 2;
grid-row: 3;
}
}
No notes defined.