Grid implícito refere-se às linhas e colunas criadas automaticamente pelo navegador ao posicionar itens em um layout de grade – aquelas não definidas explicitamente usando grid-template-rows ou grid-template-columns. As propriedades que controlam as colunas e linhas criadas implicitamente pelo navegador são grid-auto-columns e grid-auto-rows. Grid implícito também se refere às linhas e colunas adicionais que o navegador gera automaticamente quando você coloca um item fora das linhas e colunas explicitamente definidas. Por exemplo, digamos que você defina apenas duas colunas explícitas em um grid layout desta forma:

<link rel="stylesheet" href="styles.css">
<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">Item 6</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px; /* Only 2 explicit columns */
}

.grid-item {
  background-color: burlywood;
  border: 1px solid orangered;
  padding: 0.5rem;
  margin: 0.5rem;
}

Dois itens preencheram a primeira linha usando as duas colunas explícitas – Item 1 na primeira coluna e Item 2 na segunda coluna. Os próximos itens começam uma nova linha com Item 3 indo para a primeira coluna da segunda linha e Item 4 na segunda coluna da segunda linha e assim por diante. Como você já viu, grids explícitos são as áreas do grid que você configura intencionalmente. Ou seja, as linhas e colunas que você define explicitamente para um layout de grade usando as propriedades grid-template-rows e grid-template-columns. Aqui está uma tabela resumindo as diferenças entre grids implícitos e explícitos: | Feature | Explicit Grid | Implicit Grid | |----------------------|------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------| | Size control | Fully customizable using grid-template-rows and grid-template-columns . | Controlled by grid-auto-rows and grid-auto-columns , or defaults to auto . | | Default Behavior | Does not change unless explicitly defined. | Automatically adapts to items placed outside the explicit grid. | | Complexity | Requires more planning for layout structure. | Easier to implement for unstructured or variable content. | | Flexibility | Rigid structure with defined rows and columns. | Flexible and adapts to dynamically placed content. | | Performance | Potentially more performant as the layout is predefined. | May require additional browser computations for implicit grid generation. | | Use case | Useful when the grid structure is predictable and defined upfront. | Useful for dynamic layouts where content is unknown or changes frequently. |