|
|
110 0
Демо ГРІД сітки
color-2 demo-grid-largev2
color-6 demo-grid-largev3
Виконуваний код:
<![CDATA[<style>
.demo-grid {display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 1rem; margin: 0 0 5rem;}
.demo-grid > div {padding:20px;}
.demo-grid > div p {color:#fff;}
.demo-grid-large { grid-row: span 2;}
.demo-grid-largev2 {grid-row: span 2; grid-column: span 2; }
.demo-grid-largev3 { grid-column: span 2;}
.color-1 {background:plum;}
.color-2 {background:khaki;}
.color-3 {background:olive;}
.color-4 {background:Indigo;}
.color-5 {background:blue;}
.color-6 {background:darkOliveGreen;}
.color-7 {background:red;}
.color-8 {background:chocolate;}
</style>
<div class="demo-grid">
<div class="color-1 demo-grid-large">
<p>color-1 demo-grid-large</p>
</div>
<div class="color-2 demo-grid-largev2">
<p>color-2 demo-grid-largev2</p>
</div>
<div class="color-3">
<p>color-3</p>
</div>
<div class="color-4">
<p>color-4</p>
</div>
<div class="color-5 demo-grid-large">
<p>color-5 demo-grid-large</p>
</div>
<div class="color-6 demo-grid-largev3">
<p>color-6 demo-grid-largev3</p>
</div>
<div class="color-7">
<p>color-7</p>
</div>
<div class="color-8">
<p>color-8</p>
</div>
</div>]]>
|
|