Below is an example of a four column grid I created in my test site. It is across 600 pixels, which is the width of my body text.
This is the code that built it, apart from changing the image and text in the different columns, this is all you will need to create the example above. which I will explain as we go along.
<div class="column"><img src="http://wreckingsite.siterubix.com/wp-content/uploads/2016/02/wa_like_to_earn-300x300.jpg" alt="wa_like_to_earn" width="120" height="120" class="alignnone size-medium wp-image-73" />
<h3 style="font-size: 12pt; text align: left; text-transform: uppercase; color: #352ece; font-weight: 600; margin-top: -45px;">price</h3>
<h3 style="font-size: 12pt; text align: left; text-transform: uppercase; color: #352ece; font-weight: 600; margin-top: -45px;" rel="font-size: 12pt; text align: left; text-transform: uppercase; color: #352ece; font-weight: 600; margin-top: -45px;" rel="font-size: 12pt; text align: left; text-transform: uppercase; color: #352ece; font-weight: 600; margin-top: -45px;">price</h3>
<h2 style="font-size: 14pt; text align: left; text-transform: uppercase; color: #e60000; font-weight: 600; margin-top: -15px;">$00.00</h2>
<p style="width: 120px; margin-top: -10px;">Pulvinar luctus ullamcorper. Porttitor scelerisque commodo tincidunt ultricies donec posuere id eleifend.</p>
</div>
If you want to use the above code, you can copy and paste it as is then adapt it to your own requirements, but I would recommend you start "from scratch" and build your own code by copying and pasting each step, changing the data between the tags as you go.
Preview each step as you go along to make sure you are on the right track, this will give you a better understanding of how to build columns.
I just looked at this training and it looks way over my head as you predicted, but that may be because I have not looked at the "creating a HTML grid" training yet. So I'll look at that and then come back to this. Thanks!
~ Rae Anne