How to make a 2 column grid in html

Issue

I'm learning web development and I want to create a layout like this: I've recently learned of grid and I think that it would be the most effective way to execute this design. I've got a lot of images of different sizes and want to put all of them in a grid with blocks of text to their side with a small write-up related to each image.

I've been browsing the W3School docs for a few days and I still haven't figured out a way to get the effect I want.

I know this question is probably really stupid, but how do I get this to be a portion of a webpage and make it so that the sizes are all consistent with each other? (I.e The blocks of text is always the exact same size as the images, which are all the same size)

Thanks in advance!

Solution

Something like this should do it. Having the container with display grid and then grid-template-columns: auto auto is pretty much just saying give me 2 even columns, the more autos you add the more evenly spaced columns you get.

Then just style .grid-item how ever you want

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
}
.grid-item {
 height: //Whatever you want them to be
}

<div class="grid-container">
 <div class="grid-item"> Test</div>
 <div class="grid-item">test2</div>
 <div class="grid-item">test3</div>
 <div class="grid-item">test4</div>
 <div class="grid-item">test5</div>
 <div class="grid-item">test6</div>
 <div class="grid-item">test7</div>
 <div class="grid-item">test8</div>
</div>

Answered By - Richard Hpa