🎲 Criando um Dado com Flexbox e CSS Grid Layout
Tags: braziliandevs, css, flexbox, grid
Published: 2024-07-05 22:14:37

Quando nos deparamos com uma necessidade de posicionamento usando CSS logo nos perguntamos - Será que eu uso Flexbox ou CSS Grid Layout? Qual a melhor abordagem para esse caso? Neste artigo vamos trazer três abordagens diferentes para posicionar os pontos das seis faces de um dado. A primeira abordagem será com Flexbox e, as outras duas, com CSS Grid Layout.

[🔗 Acesse aqui o código no Github](https://github.com/maiquitome/creating-dice-using-css-grid-and-flexbox.git)

[![A Jornada do Autodidata em Inglês](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pkoqkmh9hic17tnddjf6.png)](https://go.hotmart.com/R93865620U)

* [Criando o arquivo `main.css`](#criando-o-arquivo-main-css)
* [Exemplo com Flexbox](#exemplo-com-flexbox)
  - [Criando a primeira face](#criando-a-primeira-face-flexbox)
  - [Criando a segunda face](#criando-a-segunda-face-flexbox)
  - [Criando a terceira face](#criando-a-terceira-face-flexbox)
  - [Criando a quarta face](#criando-a-quarta-face-flexbox)
  - [Criando a quinta face](#criando-a-quinta-face-flexbox)
  - [Criando a sexta face](#criando-a-sexta-face-flexbox)
  - [Centralizando tudo na tela](#centralizando-tudo-na-tela)
* [Exemplo com Grid Template Areas](#exemplo-com-grid-template-areas)
  - [Posicionando os Pontos](#posicionando-os-pontos)
  - [Usando `grid-template-areas`](#usando-grid-template-areas)
  - [Usando `grid-area`](#usando-grid-area)
  - [Centralizando os pontos nas células](#centralizando-os-pontos-nas-celulas)
  - [Mas ainda estou enxergando um problema](#mas-ainda-estou-exergando-um-problema)
* [Exemplo com Grid Rows e Grid Columns](#exemplo-com-grid-rows-e-grid-columns)
  - [Entendendo como funciona: `grid-row` e `grid-column`](#entendendo-como-funciona-grid-row-e-grid-column)
  - [Posicionando os pontos](#posicionando-os-pontos-com-grid-row-e-grid-column)
* [Considerações finais](#considerações-finais)

{% youtube https://youtu.be/_rdeC6r-bRA %}

## Criando o arquivo `main.css` <a name="criando-o-arquivo-main-css">

Na raiz do projeto crie o arquivo `main.css`. Nele vamos colocar os estilos que servirão tanto para o exemplo do `flexbox` quanto para os exemplos com `CSS Grid Layout`.

Vamos construir o quadrado que servirá para todas as faces do dado. Para isso, selecionaremos todos os elementos `div` com o atributo `class` cujo valor termina com a string `face`. E com a classe `.pip` vamos construir cada ponto.

Em `main.css` adicione:

```css
* {
  margin: 0;
}

body {
  background-color: #1b2231;
}

div[class$="face"] {
  width: 104px;
  height: 104px;
  background-color: #54c59f;
  border-radius: 10%;
  margin: 16px;
}

.pip {
  width: 24px;
  height: 24px;
  background-color: #080a16;
  border-radius: 50%;
  margin: 4px;
}
```

-------------------------------------------------------------------
## Exemplo com Flexbox <a name="exemplo-com-flexbox">

Vamos começar criando o arquivo HTML. Crie um diretório chamado `flexbox/index.html`:

![Criando os diretórios](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89ve6ip9s6b3rbnrdmm6.png)

E vamos importar o `main.css`. No arquivo `flexbox/index.html` adicione:

```html
<head>
  <link rel="stylesheet" href="../main.css">
</head>
```


### Criando a primeira face (Flexbox) <a name="criando-a-primeira-face-flexbox">

No arquivo `flexbox/index.html`:

```html
<head>
  <link rel="stylesheet" href="../main.css">
</head>

<!-- adicione: -->
<body>
  <div class="first-face">
    <div class="pip"></div>
  </div>
</body>
```

O resultado será um **quadrado verde** com uma **cor escura de background** e um **círculo escuro** na parte superior do quadrado:


![Quadrado verde com um ponto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bma53xude1nq2gom1r2l.png)


#### Centralizando o ponto

No arquivo `flexbox/index.html` adicione:


```html
<head>
  <link rel="stylesheet" href="../main.css">
  <!-- adicione: -->
  <link rel="stylesheet" href="style.css"> 
</head>

<body>
  <div class="first-face">
    <div class="pip"></div>
  </div>
</body>
```

Crie o arquivo `flexbox/style.css`. A primeira etapa é informar ao navegador para tornar `.first-face` um contêiner flexbox.

```css
.first-face {
  display: flex;
}
```

Olhando não há grandes alterações, mas por debaixo dos panos com `display: flex` podemos usar as linhas `MAIN AXIS` e `CROSS AXIS`.

![MAIN AXIS VS CROSS AXIS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67att1gt746370xtii0p.png)

O contêiner `first-face` agora tem um eixo principal (main axis) horizontal. O eixo principal de um contêiner flexbox que pode ser horizontal ou vertical, mas o **padrão é horizontal**. Se adicionarmos outro `pip` à `first-face`, ele aparecerá à direita do primeiro. O contêiner também tem um eixo transversal (cross axis) vertical. O eixo transversal é sempre perpendicular ao eixo principal.

A propriedade `justify-content` define o alinhamento ao longo do **eixo principal (main axis)**. Como queremos centralizar o `pip` ao longo do **eixo principal**, usaremos o valor `center`.

No arquivo `flexbox/style.css`:
```css
.first-face {
  display: flex;
  justify-content: center; /* adicione */
}
```

![justify-content: center](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vt4w9vung654db57v4mf.png)

A propriedade `align-items` determina como os itens são dispostos ao longo do **eixo transversal (cross axis)**. Como queremos que o `pip` seja centralizado ao longo desse eixo, usaremos o valor `center` aqui também.

No arquivo `flexbox/style.css`:
```css
.first-face {
  display: flex;
  justify-content: center;
  align-items: center; /* adicione */
}
```

![align-items: center](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5u5no1fcohd4dbfl8h1w.png)


### Criando a segunda face (Flexbox) <a name="criando-a-segunda-face-flexbox">

No arquivo `flexbox/index.html`:

```html
<head>
  <link rel="stylesheet" href="../main.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="first-face">
    <div class="pip"></div>
  </div>
  <!-- adicione: -->
  <div class="second-face">
    <div class="pip"></div>
    <div class="pip"></div>
  </div>
</body>
```

![Adicionando a classe "second-face" no html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7amlt4frb1xwmrctqdca.png)

No arquivo `flexbox/style.css`:

```css
.first-face {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* adicione */
.second-face {
  display: flex;
}
```

![Adicionando "display: flex" a classe "second-face"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4nt94svr1kn6xmb7euo.png)

Agora os dois pontos estão um do lado do outro. Desta vez, queremos que os pontos fiquem em lados opostos do dado. Há um valor para `justify-content` que nos permitirá fazer exatamente isso: `space-between`.

A propriedade `space-between` preenche uniformemente o espaço entre os itens flexíveis (flex items). Como há apenas dois pontos, isso os afasta um do outro.

No arquivo `flexbox/style.css`:

```css
.first-face {
  display: flex;
  justify-content: center;
  align-items: center;
}

.second-face {
  display: flex;
  justify-content: space-between; /* adicione */
}
```


![Colocando o "space-between"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/duzlmlzeqpm4t3nabiki.png)

É aqui que nos deparamos com um problema. Ao contrário de antes, não podemos definir `align-items` porque isso afetará os dois pontos. Felizmente, o flexbox inclui `align-self`. Essa propriedade nos permite alinhar itens individuais em um contêiner flexível ao longo do eixo transversal da maneira que quisermos! O valor que queremos para essa propriedade é `flex-end`.

No arquivo `flexbox/style.css`:
```css
.first-face {
  display: flex;
  justify-content: center;
  align-items: center;
}

.second-face {
  display: flex;
  justify-content: space-between; 
}

/* adicione */
.second-face .pip:nth-of-type(2) {
  align-self: flex-end;
}
```

A pseudo-classe CSS `:nth-of-type()` corresponde a um ou mais elementos de um dado tipo, baseado em sua posição entre um grupo de irmãos.

![Adicionando "align-self: flex-end"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fngc56daljzmhzgu7es.png)

### Criando a terceira face (Flexbox) <a name="criando-a-terceira-face-flexbox">

No arquivo `flexbox/index.html`:

```html
<head>
  <link rel="stylesheet" href="../main.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="first-face">
    <div class="pip"></div>
  </div>
  <div class="second-face">
    <div class="pip"></div>
    <div class="pip"></div>
  </div>
  <!-- adicione: -->
  <div class="third-face">
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
  </div>
</body>
```

No arquivo `flexbox/style.css` adicione:

```css
.third-face {
  display: flex;
  justify-content: space-between;
}

.third-face .pip:nth-of-type(2) {
  align-self: center;
}

.third-face .pip:nth-of-type(3) {
  align-self: flex-end;
}
```

![Adicionando a classe "third-face"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lv0uv7gd15p0gr6unkdq.png)

### Criando a quarta face (Flexbox) <a name="criando-a-quarta-face-flexbox">

Nesta face do dado precisaremos de duas colunas para fazer o posicionamento usando `justify-content` tanto na horizontal com na vertical:

![quatro pontos separados por duas colunas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pf3z2auj5urrne37woeb.png)


Adicione no arquivo `flexbox/index.html`:

```html
  <div class="fourth-face">
    <!-- note aqui a classe column -->
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
    <!-- e aqui também colocamos a classe column -->
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
  </div>
```

No arquivo `flexbox/style.css` adicione:

```css
.fourth-face {
  display: flex;
  justify-content: space-between;
}
```

![duas colunas com dois pontos juntos cada](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/13becp0ezhen53tke9ag.png)

No arquivo `flexbox/style.css` vamos setar o display como flex:

Ainda no arquivo `flexbox/style.css`:

```css
.fourth-face {
  display: flex;
  justify-content: space-between;
}

/* aqui colocamos display como flex */
.fourth-face .column {
  display: flex;
}
```

![quatro pontos em linha](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lx829a8jgpug751iw4v8.png)

Cada `column` possuí dois pontos cada. Podemos usar a propriedade `flex-direction` para definir a direção do eixo principal (main axis) como coluna.

```css
.fourth-face {
  display: flex;
  justify-content: space-between;
}

.fourth-face .column {
  display: flex;
  flex-direction: column; /* adicione */
}
```

![duas colunas com dois pontos juntos cada](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/13becp0ezhen53tke9ag.png)

As colunas agora são contêineres flexíveis. Percebeu como colocamos um contêiner flexível diretamente dentro de outro contêiner flexível? Não tem problema! O Flexbox não se importa se os contêineres estão aninhados.

A etapa final é espaçar os pontos dentro das colunas, separando-os uns dos outros. Como o eixo principal (main axis) agora é vertical, podemos usar o `justify-content` novamente.

```css
.fourth-face {
  display: flex;
  justify-content: space-between;
}

.fourth-face .column {
  display: flex;
  flex-direction: column; 
  justify-content: space-between; /* adicione */
}
```

Agora temos perfeitamente quatro faces do dado:

![perfeitamente quatro faces do dado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hfst5oa4ypjxk1wbv8vs.png)


### Criando a quinta face (Flexbox) <a name="criando-a-quinta-face-flexbox">

A quinta face vai ser parecida com o quarta face, mas com uma `column` a mais:

Adicione no arquivo `flexbox/index.html`:

```html
  <div class="fifth-face">
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
    <div class="column">
      <div class="pip"></div>
    </div>
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
  </div>
```

![Adicionando "fifth-face" no HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9lobs113m9lhw9y3nhk1.png)


Adicione no arquivo `flexbox/style.css`:

```css
.fifth-face {
  display: flex;
  justify-content: space-between;
}
```

Perceba bem as três colunas definidas:

![Adicioando `fifth-face` no arquivo css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3fffndi49nt17ptu4290.png)

Vamos transformar cada coluna em flex e alterar a direção da main axis para poder usar o `justify-content` na vertical.

No arquivo `flexbox/style.css`:

```css
.fifth-face {
  display: flex;
  justify-content: space-between;
}

/* Adicione: */
.fifth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
```


![Falta centralizar o ponto do meio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5dnl25q8vrqt4ruvzvw9.png)


Precisamos agora só centralizar o ponto do meio. 

No arquivo `flexbox/style.css`:

```css
.fifth-face {
  display: flex;
  justify-content: space-between;
}

.fifth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* adicione: */
.fifth-face .column:nth-of-type(2) {
  justify-content: center;
}
```

Agora temos perfeitamente cinco faces do dado, faltando apenas a sexta face:

![Falta apenas a sexta face](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fzutjy7l2l1du5d5gko.png)

### Criando a sexta face (Flexbox) <a name="criando-a-sexta-face-flexbox">

Para criar a sexta face do dado ficou fácil, apenas precisamos de duas colunas com três pontos cada.

Adicione no arquivo `flexbox/style.css`:

```html
  <div class="sixth-face">
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
  </div>
```

![A sexta face apenas com HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ab9ad5t5rmwxi5qvrh5c.png)

Vamos reaproveitar código. Como a sexta face também possuí apenas duas colunas igual a quarta face, podemos colocar `.sixth-face` junto do código do `.fourth-face`:

```css
.fourth-face,
.sixth-face {
  display: flex;
  justify-content: space-between;
}

.fourth-face .column, .sixth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
```

Agora sim, seis faces do dado completas:


![Seis faces completas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jimj6mjo9po7zenyhdws.png)


### Centralizando tudo na tela <a name="centralizando-tudo-na-tela">

As facea dos dados ficaram em coluna e, já que aprendemos como funciona o Flexbox, que tal usar no `body` também para centralizar tudo?

Adicione no arquivo `main.css`:

```css
body {
  background-color: #1b2231;
  display: flex;
}
```

Agora temos todas as faces, uma do lado da outra:

![Todas as faces do dado - uma do lado da outra](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4xoeu66edup86yp19cex.png)

Temos um problema ao dominuir a tela na horizontal, os quadros ficam com tamanhos diferentes:

![quadros com tamanhos diferentes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4jkd582fuwnf2xlhljs.png)

Vamos colocar um comando para quebrar a linha ao invés de alterar o tamanho dos quadrados:

```css
body {
  background-color: #1b2231;
  display: flex;
  flex-wrap: wrap; /* adicione */
}
```

![quebrando a linha ao invés de alterar o tamanho dos quadrados](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ga1so33garwh9wv4yln6.png)

Agora vamos começar a centralizar tudo.

#### Centralizando na horizontal (main axis):

```css
body {
  background-color: #1b2231;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* adicione */
}
```

![Centralizando na horizontal (main axis)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4e5efbicoyrjjjid43t.png)

#### Centralizando na vertical (cross axis):

```css
body {
  background-color: #1b2231;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
  align-items: center; /* adicione */
}
```

![Centralizando na vertical (cross axis)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bybjqi9md0ihx91fufkl.png)

#### Juntando tudo bem no centro:


```css
body {
  background-color: #1b2231;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
  align-items: center; 
  align-content: center; /* adicione */
}
```

![Usando "align-content: center"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87bdkq1oaayefwfdfne8.png)

Agora podemos diminuir a tela tranquilamente que todo conteúdo permanece no centro da tela:

![todo conteúdo permanece no centro da tela](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nuc6w8u5eut5vxhgb2oj.png)

-------------------------------------------------------------------

## Exemplo com Grid Template Areas <a name="exemplo-com-grid-template-areas">

Neste exemplo vamos usar o CSS Grid Layout, já que os pontos de um dado tradicional estão alinhados em **três linhas** e **três colunas**.

Imagine a face de um dado como uma grade 3x3, em que cada célula representa a posição de um ponto:

```
+---+---+---+
| a | b | c |
+---+---+---+
| d | e | f |
+---+---+---+
| g | h | i |
+---+---+---+
```

Para criar uma grade simples de 3 por 3 usando CSS, a única coisa que precisamos fazer é definir um elemento contêiner como `display: grid` e informar que queremos três linhas (`grid-template-rows: 1fr 1fr 1fr;`) e três colunas (`grid-template-columns: 1fr 1fr 1fr;`) de tamanhos iguais.

Crie o arquivo `grid-template-areas/style.css` com o seguinte código:

```css
[class$="face"] {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
}
```

A unidade `fr` permite definir o tamanho de uma linha ou coluna como uma fração do espaço livre do contêiner da grade; no nosso caso, **queremos um terço do espaço disponível**, portanto, usamos `1fr` três vezes.

Com isso já podemos perceber os pontos separados por 3 colunas, sendo colocados automaticamente em cada uma das células, da esquerda para a direita:

![Todas as faces com pontos separados por 3 colunas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r85515o9me9vwgpo5pu1.png)

Podemos simplificar esse código CSS. Em vez de escrever `1fr 1fr 1fr`, podemos usar `repeat(3, 1fr)` para repetir a unidade `1fr` três vezes. Também usamos a propriedade abreviada `grid-template` que define `linhas/colunas`:

```css
[class$="face"] {
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}
```

É simples construir uma grade 3X3 com `grid-template`, **mas ainda não usaremos essa propriedade**. A seguir usaremos `grid-template-areas` sem o `grid-template`, assim iremos perceber que precisamos adicionar mais tarde o `grid-template` também.

Crie o arquivo `grid-template-areas/index.html` com o seguinte código:

```html
<head>
  <link rel="stylesheet" href="../main.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="first-face">
    <div class="pip"></div>
  </div>
  <div class="second-face">
    <div class="pip"></div>
    <div class="pip"></div>
  </div>
  <div class="third-face">
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
  </div>
  <div class="fourth-face">
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
  </div>
  <div class="fifth-face">
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
  </div>
  <div class="sixth-face">
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
  </div>
</body>
```

![Faces apenas com HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ws9ygg92wm16yrhixhcj.png)


No código acima já podemos perceber uma diferença em relação ao exemplo anterior usando Flexbox: Não há classes `column`. Então percebemos que o arquivo HTML já está mais simples. Vamos agora partir para o arquivo CSS. 

Crie o arquivo `grid-template-areas/style.css`:

![imagem da estrutura de arquivos do projeto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/584i7zqp8hwccp891tlx.png)

### Posicionando os Pontos <a name="posicionando-os-pontos">

Agora chegamos ao ponto em que precisamos posicionar os pontos (pips) para cada um dos valores de cada face do dado. Seria bom se os pontos fluíssem automaticamente para as posições corretas na grade para cada valor. Infelizmente, precisaremos definir a posição de cada um dos pontos individualmente.

Lembra da tabela ASCII no início desse exemplo? Vamos criar algo muito semelhante usando CSS. **Em vez de rotular as células na ordem das linhas, usaremos essa ordem específica**, de modo que precisaremos apenas de uma quantidade mínima de CSS para corrigir os casos extremos:

```
+---+---+---+
| a |   | c |
+---+---+---+
| e | g | f |
+---+---+---+
| d |   | b |
+---+---+---+
```

![tabelas com as letras](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bltzll5ilf21y872t7ua.png)

Duas das células são deixadas vazias, pois nunca são usadas em nossos dados.

#### Usando `grid-template-areas` <a name="usando-grid-template-areas">

Podemos traduzir esse layout para CSS usando a propriedade mágica `grid-template-areas` (que substitui o `grid-template` usado acima):

Adicione no arquivo `grid-template-areas/style.css`:

```css
[class$="face"] {
    display: grid;
    grid-template-areas:
        "a . c"
        "e g f"
        "d . b";
}
```

![usando grid-template-areas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xi4d6z6j70695pk03dws.png)

Portanto, em vez de usar unidades tradicionais para dimensionar nossas linhas e colunas, podemos simplesmente nos referir a cada célula com um nome. A própria sintaxe fornece uma visualização da estrutura da grade, assim como a nossa tabela ASCII. Os nomes são definidos pela propriedade `grid-area` do item da grade. Os pontos na coluna do meio significa uma célula vazia.

Aparentemente, olhando a imagem acima, não houve alterações. Falta agora usarmos o `grid-area`.

#### Usando `grid-area` <a name="usando-grid-area">

Usamos a propriedade `grid-area` para dar um nome a esse item da grade. O modelo de grade (acima) pode então fazer referência ao item pelo nome para colocá-lo em uma área específica da grade. A pseudo classe `:nth-of-type()` nos permite direcionar cada pip individualmente.

* Posicionando a letra `b`

Com o código abaixo conseguimos vizualizar onde está o ponto 2:

```css
.pip:nth-of-type(2) {
  background-color: red;
}
```

![posição da letra `b`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k5npkvyxd2uxhunelubk.png)


```css
.pip:nth-of-type(2) {
  grid-area: b;
}
```

Resultado após a letra `b` ter sido posicionada certa:

![resultado após a posição certa do `b`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kw8ofump6jjlx1385n4o.png)


* Posicionando a letra `c`

![posição da letra `c`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8bqv4isqoeoqudp8lv28.png)


```css
.pip:nth-of-type(3) {
  grid-area: c;
}
```

Resultado após a letra `c` ter sido posicionada certa:


![resultado após a posição certa do `c`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/icniboecbu2r3od3y3p0.png)


* Posicionando a letra `d`


![posição da letra `d`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/or1rbeoc05sjioe0odi3.png)

```css
.pip:nth-of-type(4) {
  grid-area: d;
}
```

Resultado após a letra `d` ter sido posicionada certa:

![resultado após a posição certa do `d`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gazyngryc7nbjqov0dhr.png)

* Posicionando a letra `e`

![posição da letra `e`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ihho4tjgq5tuvxbqtu0.png)

```css
.pip:nth-of-type(5) {
  grid-area: e;
}
```

Resultado após a letra `e` ter sido posicionada certa:

![resultado após a posição certa do `e`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9flpx4oy0eorrwjo5ez1.png)

* Posicionando a letra `f`

![posição da letra `f`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gg61ddjxryxze2jantas.png)

```css
.pip:nth-of-type(6) {
  grid-area: f;
}
```

Resultado após a letra `f` ter sido posicionada certa:

![resultado após a posição certa do `f`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyjnhqihqis6vr5mgmk2.png)

* Posicionando a letra `g`

![posição da letra `g`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nx0wstw3hd2jhyx398eq.png)

Como você pode ver, os valores 1, 3 e 5 ainda estão incorretos. Devido à ordem das áreas do modelo de grade que escolhemos anteriormente, só precisamos reposicionar o último `pip` de cada um desses dados. Para obter o resultado que desejamos, combinamos as pseudo classes `:nth-of-type(odd)` e `:last-of-type`:

```css
.pip:nth-of-type(odd):last-of-type {
  grid-area: g;
}
```

* `:nth-of-type(odd)` = todos os irmãos(ímpar)
* `last-of-type` = último irmão

![explicando irmãos ímpares](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jnlgkc5dukshcnrzfpr6.png)

Resultado após a letra `g` ter sido posicionada certa:

![resultado após a posição certa do `g`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00xkzj9848jxmcsvux8v.png)


#### Centralizando os pontos nas células <a name="centralizando-os-pontos-nas-celulas">

Está estranho, não está? é porque precisamos centralizar os pontos, na imagem abaixo, podemos ver os pontos alinhados a esquerda:

![Pontos alinhados a esquerda](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kpt1z5exp5asxv6co17i.png)


No mesmo arquivo `grid-template-areas/style.css` vamos adicionar:

```css
.pip {
  align-self: center;
  justify-self: center;
}
```

![pontos centralizados na célula](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/udp18ygrb74dsruaqm14.png)


#### Mas ainda estou enxergando um problema <a name="mas-ainda-estou-exergando-um-problema">

O padding em cada face está diferente!!!

![mostrando o padding diferente](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a12abek430smgo4ofyot.png)

![face com 4 pontos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ihlfiw4x27k5jyrx813v.png)

![face com 5 pontos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5f9oau1cdv8mput6b1w.png)

Agora vamos usar `grid-template-rows` e `grid-template-columns` para deixar as células todas do mesmo tamanho.

No arquivo `grid-template-areas/style.css`:

```css
[class$="face"] {
  display: grid;
  grid-template-rows: repeat(3, 1fr); /* adicione */
  grid-template-columns: repeat(3, 1fr); /* adicione */
  grid-template-areas:
    "a . c"
    "e g f"
    "d . b";
}
```

Agora sim!!! O resultado ficou perfeito!!

![resultado perfeito](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qmifo8wyi6y9swbxbbhd.png)

![inspecionando a face 4 - ANTES e DEPOIS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pgtdupgjwp9x0s75xca3.png)

Apenas mas uma melhoria no código. Podemos fazer uma abreviação trocando duas linhas por uma.

No arquivo `grid-template-areas/style.css`:

```css
[class$="face"] {
  grid-template-rows: repeat(3, 1fr); /* remover */
  grid-template-columns: repeat(3, 1fr); /* remover */

  grid-template: repeat(3, 1fr) / repeat(3, 1fr); /* adicionar */
}

.pip {
  align-self: center; /* remover */
  justify-self: center; /* remover */

  place-self: center; /* adicionar */
}
```

O resultado ficou perfeito mas o código ficou muito complexo. Vamos tentar usar o CSS Grid Layout de outra forma? Vamos ver isso no próximo exemplo...

-------------------------------------------------------------------

## Exemplo com Grid Rows e Grid Columns <a name="exemplo-com-grid-rows-e-grid-columns">

Neste exemplo também vamos usar o CSS Grid Layout com **três linhas** e **três colunas**, onde cada célula representa a posição de um ponto:

```
+---+---+---+
| . | . | . |
+---+---+---+
| . | . | . |
+---+---+---+
| . | . | . |
+---+---+---+
```

### Entendendo como funciona: `grid-row` e `grid-column` <a name="entendendo-como-funciona-grid-row-e-grid-column">


Antes de montarmos o dado com essa solução, vamos só entender como funciona `grid-row` e `grid-column`. Essa será uma explicação mais rápida pois existe muita coisa pra aprender sobre o assunto e fugiria do escopo desse artigo.

Vamos já criar os arquivos:

No arquivo `grid-rows-and-grid-columns/index.html` você pode colocar esse código:

```html
<head>
  <link rel="stylesheet" href="../main.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="face">
    <div class="square"></div> <!-- square é provisório -->
  </div>
</body>
```

![estrutura de pastas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovdolhk1chfs7cyjsd82.png)


E no arquivo `grid-rows-and-grid-columns/style.css` você pode colocar esse código:

```css
[class$="face"] {
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

.square {
  background-color: white;
  grid-column-start: 1;
  grid-column-end: 2;
}
```
O resultado será esse:

![face com um quadrado na primeira coluna](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16rqpsl39btcbi7a1h39.png)

Temos um quadrado na primeira linha ocupando um espaço da coluna 1 até a coluna 2.

Como não definimos uma altura (height) e uma largura (width) para o quadrado, ele acaba ocupando o espaço inteiro da célula:

![ocupando o espaço inteiro da célula](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ftoi5jg43uep6qa7zy1i.png)

Vizualizamos 4 linhas na vertical, então podemos especificar que queremos que o quadrado se estenda até a linha 3:

```css
.square {
  background-color: white;
  grid-column-start: 1;
  grid-column-end: 3; /* altere de 2 para 3 */
}
```

![quadrado virando um retangulo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oyf2n3vobdyahxrs7hml.png)

Podemos especificar que queremos que o quadrado se estenda até a linha 4. Podemos usar o número `4` ou podemos usar `-1`:

```css
.square {
  background-color: white;
  grid-column-start: 1;
  grid-column-end: -1; /* pode usar 4 ou -1 */
}
```

![quadrado ocupando 3 colunas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6pcetm24ci17l2pg6igj.png)

Podemos agora especificar que esses quadrados devem começar na linha 2 horizontal:

```css
.square {
  background-color: white;
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 2; /* adicione */
}
``` 

![quadrados posicionados na linha 2 vertical](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/elgagqliorvwlf1yffhi.png)


### Posicionando os pontos com `grid-row` e `grid-column` <a name="posicionando-os-pontos-com-grid-row-e-grid-column">

Agora sim vamos para a solução. 

No arquivo `grid-rows-and-grid-columns/index.html` o código final será esse, ou seja não iremos mais modificar ele:

```html
<head>
  <link rel="stylesheet" href="../main.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="first-face">
    <div class="pip center middle"></div>
  </div>
  <div class="second-face">
    <div class="pip"></div>
    <div class="pip right bottom"></div>
  </div>
  <div class="third-face">
    <div class="pip"></div>
    <div class="pip middle center"></div>
    <div class="pip bottom right"></div>
  </div>
  <div class="fourth-face">
    <div class="pip"></div>
    <div class="pip right"></div>
    <div class="pip bottom"></div>
    <div class="pip bottom right"></div>
  </div>
  <div class="fifth-face">
    <div class="pip"></div>
    <div class="pip right"></div>
    <div class="pip middle center"></div>
    <div class="pip bottom"></div>
    <div class="pip bottom right"></div>
  </div>
  <div class="sixth-face">
    <div class="pip"></div>
    <div class="pip right"></div>
    <div class="pip"></div>
    <div class="pip right"></div>
    <div class="pip bottom"></div>
    <div class="pip bottom right"></div>
  </div>
</body>
```

![Faces apenas com HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ws9ygg92wm16yrhixhcj.png)

E no arquivo `grid-rows-and-grid-columns/style.css` você pode colocar esse código:

```css
[class$="face"] {
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

.top {
  grid-row-start: 1;
}
.middle {
  grid-row-start: 2;
}
.bottom {
  /* grid-row-start: 3; */
  grid-row-end: -1;
}

.left {
  grid-column-start: 1;
}
.center {
  grid-column-start: 2;
}
.right {
  /* grid-column-start: 3; */
  grid-column-end: -1;
}
```

O resultado está quase o esperado:

![resultado quase esperado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jv4bhjz8bzdb6cb5pqc.png)

Preciamos centralizar cada ponto em sua célula:

```css
.pip {
  place-self: center;
}
```

Agora o resultado ficou perfeito:

![resultado perfeito](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30byar5gium0scl9plde.png)

![sexta face perfeita](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zfhjf9jhiiyb7b83t1w.png)

-------------------------------------------------------------------

## Considerações finais <a name="considerações-finais">

Podemos concluir que o código da segunda abordagem com `grid-template-areas` ficou mais confuso do que as outras abordagens. Já a última abordagem com `grid-rows` e `grid-columns` teve menos código CSS e ficou fácil de entender o que acontece, sendo assim mais fácil de dar manutenção, então vamos para o ranking:

* 🥇 1º Lugar: Exemplo 3 (`grid-rows` e `grid-columns`)
* 🥈 2º Lugar: Exemplo 1 (Flexbox)
* 🥉 3º Lugar: Exemplo 2 (`grid-template-areas`)

Era isso... obrigado por ler e até a próxima 🙂👋

-------------------------------------------------------------------

Para a construção deste artigo foi utilizado os seguintes conteúdos como base:

* [Getting Dicey With Flexbox](https://davidwalsh.name/flexbox-dice)
* [Creating dice using CSS grid](https://dev.to/ekeijl/creating-dice-using-css-grid-j4)
* [[css] Designing Dice using CSS Grid](https://youtu.be/HyxtLn8g4qc?si=M4fLtgI0F3ZZIaTu)