Fazer com que as linhas abranjam várias colunas

As linhas na grade CSS podem ser configuradas para abranger várias colunas usando as propriedades de grade apropriadas. Veja como fazer isso:

Posicionamento baseado em linha:

A abordagem mais comum é por meio do posicionamento baseado em linha, onde você especifica as linhas de início e fim da coluna:

grid-column: 1 / 4;  // Spans columns 1, 2, and 3

Explicit Grid Area:

Use a propriedade grid-area, que define explicitamente as células ocupadas:

grid-area: 1 / 2 / span 3;  // Spans 3 columns from row 1, column 2

Valores negativos:

Valores negativos em grid-column ou grid-column-start podem ser usados ​​para direita posicionamento à esquerda:

grid-column: -2 / -1;  // Spans the last 2 columns

Column Line Clamping:

Esta técnica usa a fixação de linha para estender o ponto final da linha até o espaço disponível:

grid-column: auto;
grid-column-end: 100%;

Auto-dimensionamento com mínimo:

O dimensionamento automático com uma largura mínima garante que a linha ocupe pelo menos um número especificado de colunas:

grid-column: auto;
min-width: 400px;

Exemplo:

Para esticar a linha de navegação em todas as colunas:

  

    ...
  
  ...

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.main-nav {
  grid-column: 1 / -1;  // Spans all columns
}

Ao aplicar um desses métodos, você pode estender linhas ou colunas em várias colunas no CSS Grid, criando layouts complexos e flexíveis.