Definindo linhas e colunas

3.1 Propriedade grid-template-columns

O CSS Grid Layout permite criar layouts complexos de páginas web usando linhas e colunas. Duas propriedades chave para definir a estrutura da grade são grid-template-rows e grid-template-columns. Essas propriedades permitem definir o número e tamanho das linhas e colunas no container Grid, dando aos desenvolvedores controle total sobre o layout dos elementos.

A propriedade grid-template-columns define o número e tamanhos das colunas na grade. Ela aceita um ou mais valores, que podem ser especificados em várias unidades de medida, como pixels (px), percentagens (%), unidades de flexibilidade (fr), e outras.

Exemplo 1: Definindo tamanhos fixos de colunas

Neste exemplo, a grade consistirá em três colunas. A primeira coluna tem largura de 100px, a segunda coluna largura de 200px, e a terceira coluna largura de 100px:

    
      .grid-container {
        display: grid;
        grid-template-columns: 100px 200px 100px; /* Três colunas com tamanhos fixos */
      }
    
  

Exemplo 2: Utilizando unidades de flexibilidade (fr)

Neste exemplo, a grade consistirá em três colunas. A primeira e a terceira coluna ocuparão a mesma quantidade de espaço, e a segunda coluna será duas vezes mais larga que cada uma delas:

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr; /* Três colunas com tamanhos flexíveis */
      }
    
  

Exemplo 3: Utilizando repetição (repeat)

Neste exemplo, a função repeat é utilizada para simplificar a declaração. A grade consistirá em três colunas de largura igual:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Três colunas iguais */
      }
    
  

Exemplo 4: Definindo tamanhos mínimos e máximos (minmax)

Neste exemplo, cada uma das três colunas terá uma largura mínima de 100px e um tamanho flexível, que poderá aumentar até 1fr dependendo do espaço disponível:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, minmax(100px, 1fr)); /* Três colunas com largura mínima de 100px e tamanhos flexíveis */
      }
    
  

3.2 Propriedade grid-template-rows

A propriedade grid-template-rows é similar à grid-template-columns, mas define o número e tamanhos das linhas na grade. Ela também aceita um ou mais valores, que podem ser especificados em várias unidades de medida.

Exemplo 1: Definindo tamanhos fixos de linhas

Neste exemplo, a grade consistirá em três linhas. A primeira linha tem altura de 50px, a segunda linha altura de 100px, e a terceira linha altura de 50px:

    
      .grid-container {
        display: grid;
        grid-template-rows: 50px 100px 50px; /* Três linhas com tamanhos fixos */
      }
    
  

Exemplo 2: Utilizando unidades de flexibilidade (fr)

Neste exemplo, a grade consistirá em três linhas. A primeira e a terceira linhas ocuparão a mesma quantidade de espaço, e a segunda linha será duas vezes mais alta que cada uma delas:

    
      .grid-container {
        display: grid;
        grid-template-rows: 1fr 2fr 1fr; /* Três linhas com tamanhos flexíveis */
      }
    
  

Exemplo 3: Utilizando repetição (repeat)

Neste exemplo, a função repeat é utilizada para simplificar a declaração. A grade consistirá em três linhas de altura igual:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 1fr); /* Três linhas iguais */
      }
    
  

Exemplo 4: Definindo tamanhos mínimos e máximos (minmax)

Neste exemplo, cada uma das três linhas terá uma altura mínima de 50px e um tamanho flexível, que poderá aumentar até 1fr dependendo do espaço disponível:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, minmax(50px, 1fr)); /* Três linhas com altura mínima de 50px e tamanhos flexíveis */
      }
    
  

3.3 Combinando propriedades

Combinando propriedades grid-template-rows e grid-template-columns

Essas propriedades podem ser usadas juntas para criar grades complexas com tamanhos diferentes de linhas e colunas.

Neste exemplo, a grade consistirá em duas colunas: a primeira coluna ocupará 1 parte do espaço disponível, e a segunda coluna — 2 partes. A grade também será composta por duas linhas: a primeira linha com altura de 100px, a segunda linha com altura de 200px.

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 100px 200px;
      }
    
  

Exemplo de implementação completa:

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 100px 200px;
        gap: 10px;
      }

      .grid-item {
        background-color: #3498db;
        color: white;
        padding: 20px;
        text-align: center;
        border: 1px solid #fff;
      }
    
  

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Exemplo de CSS Grid</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="grid-item">Elemento 1</div>
            <div class="grid-item">Elemento 2</div>
            <div class="grid-item">Elemento 3</div>
            <div class="grid-item">Elemento 4</div>
          </div>
        </body>
      </html>
    
  

Explicação do código:

• .grid-container: define o container como um grid-container com duas colunas e duas linhas. Os espaços entre os elementos são definidos pela propriedade gap
• .grid-item: define os estilos básicos para os elementos do grid, como cor de fundo, cor do texto, espaçamento interno, centralização do texto e borda