Von b_funke |
HTML
<div class="grid-container">
<div class="item1"><img src="bild1.jpg" alt="" /></div>
<div class="item2"><img src="bild1.jpg" alt="" /><br/><img src="bild2.jpg" alt="" /><img src="bild3.jpg" alt="" /></div>
</div>
<div class="item1"><img src="bild1.jpg" alt="" /></div>
<div class="item2"><img src="bild1.jpg" alt="" /><br/><img src="bild2.jpg" alt="" /><img src="bild3.jpg" alt="" /></div>
</div>
CSS
.item1
{ grid-area: menu; }
.item2
{ grid-area: main; }
.grid-container
{ display: grid;
grid-template-areas: 'menu main';
gap: 10px;
padding: 10px; }
.grid-container > div
{ background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 5px 5px;
font-size: 30px; }
{ grid-area: menu; }
.item2
{ grid-area: main; }
.grid-container
{ display: grid;
grid-template-areas: 'menu main';
gap: 10px;
padding: 10px; }
.grid-container > div
{ background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 5px 5px;
font-size: 30px; }
Anzeige
Europäische Zentralbank im Bau