<div class="container">
<div class="item">
<h2 class="item__heading">
<a href="#">Sondovat mnohem v nejhůře větších izolace</a>
</h2>
<p class="item__image">
<a href="#"><img src="https://satyr.dev/600x400/58563a" alt="Satyr.io dummy image" width="300" height="200" /></a>
</p>
<p class="item__perex">
David franků pozadí ty narozen žádná. Vědy roce dané včetně reakcím i za co divný tvarů dar jejíž nepravdivá?
</p>
<p>
<button>Více informací…</button>
</p>
</div>
<div class="item">
<h2 class="item__heading">
<a href="#">Nezůstane by péče položená, trasách malém ověšeny podlouhlým</a>
</h2>
<p class="item__image">
<a href="#"><img src="https://satyr.dev/600x400/58563a" alt="Satyr.io dummy image" width="300" height="200" /></a>
</p>
<p class="item__perex">
Nervovou před síť velký v znovu dobyvačné: si skútrů, ať využívat, tvary leží vědu někdy s pozitivním. Za ve rok takže pole osm tu sedm, vážil létá ta četné nejméně sága všeobecné ta přesnější měst.
</p>
<p>
<button>Více informací…</button>
</p>
</div>
</div>
xxxxxxxxxx
.container {
display: grid;
grid-template-columns: repeat(2, minmax(250px, calc(300px + 4em)));
grid-template-rows: repeat(4, auto);
column-gap: 4rem;
}
.item {
display: grid;
grid-template-rows: subgrid;
grid-row: span 4;
}
/* Not so important: */
body {
background: #e5e3de;
color: #2E2C08;
}
a {
color: #2E2C08;
}
.container {
padding: 1em;
margin: 2em;
max-width: 1000px;
}
.item {
background: white;
padding: 2rem;
}
img {
height: auto;
max-width: 100%;
}
p, h2 {
padding: 0;
margin: 0;
}
p {
margin-bottom: 1em;
}
p:last-child {
margin-bottom: 0;
}
h2 {
font-size: 1.5em;
margin-bottom: 0.5em;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.