POI na obrázku

by Petr Haluza

HTML

<div class="parent">
<div class="div1 box">1</div>
<div class="div2 box">2</div>
<div class="div3 box">3</div>
<div class="div4 box">4</div>
<div class="div5 box">5</div>
<div class="div6 box">6</div>
</div>

CSS

.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
background: url(http://www.hal3000.cz/_pub/images/pchs2320/image2.jpg) no-repeat;
background-size:cover;
width: 600px;
height: 400px;
}

.div1 { grid-area: 1 / 1 / 2 / 3; }
.div2 { grid-area: 2 / 1 / 3 / 2; }
.div3 { grid-area: 3 / 1 / 4 / 3; }
.div4 { grid-area: 1 / 3 / 2 / 5; }
.div5 { grid-area: 2 / 4 / 3 / 5; }
.div6 { grid-area: 3 / 3 / 4 / 5; }


.box { border:1px solid red; text-align:center;}