HTML - Aprenda a colocar imagens lado-a-lado

Hoje iremos aprender a alinhar imagens em HTML lado a lado de uma forma bem simples usando a propriedade flexbox, você vai ver como fazê-lo passo a passo, mas caso queira o código pronto para copiar e colar, está no final da página.
Exemplo

1) Adicionando HTML

<div class="row">
  <div class="coluna">
    <img src="imagem1" alt="descrição da imagem" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem2" alt="descrição da imagem" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem3" alt="descrição da imagem" style="width:100%">
  </div></div>

Legenda:

Propriedade	Descrição
imagem	caminho URL específico da imagem
descrição da imagem	descrição da foto, clique aqui para ler sobre importância da tag ALT
width:100%	essa propriedade irá dizer ao site para fazer com que a imagem preencha toda a área requisitada (não é necessário editá-la)

2) Adicionando o CSS

.coluna{
  float: left;
  width: 33.33%;
.row::after {
  content: "";
  clear: both;
  display: table;
}

O valor 33.33% determina que haverá um limite de 3 imagens por linha (33,33% = 1/3), caso você queira retirar essa limitação, é só apagar toda a linha width. Caso você queira determinar outro número de imagem por linha, use a porcentagem que cada uma vai ocupar indo pela lógica de frações (1/2=50%; 1/3 = 33,33%; 1/4 = 25%; 1/5 = 20%;)

2 imagens por linha = 50%
4 imagens por linha = 25%
5 imagens por linha = 20%
X imagens por linha = 1/X * 100 [%]

3) Deixando responsivo

@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

Faz as três colunas se empilharem de forma distribuídas umas sobre as outras.

O valor 500px determina que a partir das telas com valores iguais ou menos que 500px, as images irão se empilhar, você pode alterar esse valor de acordo com a sua necessidade. 

Copiar e colar

Para quem não quer setar o CSS fora da caixa do HTML, ou seja, quer o código para copiar, colar e usar logo:

<div class="row">
  <div class="coluna">
    <img src="imagem1" alt="descrição da imagem" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem2" alt="descrição da imagem" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem3" alt="descrição da imagem" style="width:100%">
  </div></div>

<style>
.coluna{
  float: left;
  width: 33.33%;
.row::after {
  content: "";
  clear: both;
  display: table;
}
</style>


@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

Deixar as imagens com link
Você só precisa por a tag <a> antes da <img> e fechá-la após a <img> acabar, por exemplo:

<div class="row">
  <div class="coluna"><a href='http://url-destino'><img src=".jpg" alt="" style="width:100%"></div></a>