CSS table or grid - html

Question

I want to create grid or table with three cards. Two cards in a row and the third under these two cards, like on the image (the third card can be other size). But how can I do this?
<div class="cards">
<div id="card1">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
<div id="card2">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
<div id="card3">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
</div>

Answer 1

This should work
.first-row{
display:flex;
}
.first-row .card{
flex:1;
}
.card{
border:5px solid black;
margin: 10px;
}
<div class="cards">
<div class='first-row'>
<div class='card' id="card1">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
<div class='card' id="card2">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
</div>
<div class='card' id="card3">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
</div>

Answer 2

Check it out.
.first-row{
display:flex;
}
.first-row .card{
flex:1;
}
.card{
border:5px solid black;
margin: 10px;
}
<div class="cards">
<div class='first-row'>
<div class='card' id="card1">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
<div class='card' id="card2">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
</div>
<div class='card' id="card3">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
</div>

Answer 3

The Answer is CSS Flex Box ;)
section {
max-width: 740px;
margin: 0 auto;
display: flex;
}
.column {
margin: 10px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
section:nth-of-type(5) .column:first-of-type {
flex-grow: 2;
flex-shrink: 2;
flex-basis: 22px;
}
section:nth-of-type(6) .column:nth-of-type(2) {
flex-grow: 4;
flex-shrink: 4;
flex-basis: 66px;
}
/* OTHER STYLES */
html, body {
color: white;
height: 100%;
box-sizing: border-box;
}
body {
font-family: 'Raleway', sans-serif;
padding: 10px;
background: linear-gradient(135deg, #b04, #f80) fixed;
}
.column {
padding: 10px 0;
background-color: rgba(255, 0, 0, 0.25);
text-align: center;
border: 1px solid transparentize(white, 0.25);
background-color: transparentize(white, 0.8);
color: transparentize(white, 0.1);
}
<section>
<div class="column">One Third</div>
<div class="column">One Third</div>
<div class="column">One Third</div>
</section>
<section>
<div class="column">One Half</div>
<div class="column">One Half</div>
</section>
<section>
<div class="column">One Fourth</div>
<div class="column">One Fourth</div>
<div class="column">One Fourth</div>
<div class="column">One Fourth</div>
</section>
<section>
<div class="column">One Sixth</div>
<div class="column">One Sixth</div>
<div class="column">One Sixth</div>
<div class="column">One Sixth</div>
<div class="column">One Sixth</div>
<div class="column">One Sixth</div>
</section>
<section>
<div class="column">One Half</div>
<div class="column">One Fourth</div>
<div class="column">One Fourth</div>
</section>
<section>
<div class="column">One Sixth</div>
<div class="column">Two Thirds</div>
<div class="column">One Sixth</div>
</section>

Answer 4

.cards {
display: grid;
/* Make two tracks with the remaining space*/
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
#card1,
#card2 {
background: #a03;
}
#card3 {
background: #be3;
/*Let card3 span 2 tracks*/
grid-column: span 2;
}
/*This will make the images span 100%*/
img {
max-width: 100%;
height: auto;
}
<div class="cards">
<div id="card1">
<img src="https://images.unsplash.com/photo-1440703281807-16ead562a596?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=f2b0cfa6c4950efda736ae4308c03420" alt="Image">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
<div id="card2">
<img src="https://images.unsplash.com/photo-1440703281807-16ead562a596?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=f2b0cfa6c4950efda736ae4308c03420" alt="Image">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
<div id="card3">
<img src="https://images.unsplash.com/photo-1440703281807-16ead562a596?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=f2b0cfa6c4950efda736ae4308c03420" alt="Image">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
</div>