Grid_example_2

grid_example_2.markdown

Grid_example_2

A Pen by Roman on CodePen.

License.

index.html

<div class="grid-wrapper">
   		 <div class="grid-item item-1"></div>
   		 <div class="grid-item item-2"></div>
   		 <div class="grid-item item-3"></div>
   		 <div class="grid-item item-4"></div>
   		 <div class="grid-item item-5"></div>
</div>

style.css

.grid-wrapper {
    display: grid;
    grid-template-columns: 200px 200px;
    grid-template-rows: 100px 100px 100px;
}

.item-1 {
    background-color: rgb(161, 48, 48);
}

.item-2 {
    background-color: rgb(49, 163, 68);
}

.item-3 {
    background-color: rgb(34, 32, 180);
}

.item-4 {
    background-color: rgb(207, 219, 29);
}

.item-5 {
    background-color: rgb(175, 52, 165);
}

.grid-wrapper {
    display: grid;❶
    grid-template-columns: 200px 200px;❷
    grid-template-rows: 100px 100px 100px;❸
}