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 [%]

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>

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>