css - trick - Alinhando itens de grade em toda a linha/coluna(como itens flexíveis)




space between css flex (2)

Com um contêiner flex e flex-wrap: wrap você pode alinhar os itens de transbordamento ao centro usando justify-content: center .

Existe uma maneira de obter o mesmo comportamento para o excesso de itens da grade usando a grade CSS?

Eu criei uma caneta mostrando o comportamento flexível desejado

.container-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.container-flex .item {
  width: 33.33%;
  background: green;
  border: 1px solid;
}

.container-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.container-grid .item {
  background: red;
  border: 1px solid;
}

* {
  box-sizing: border-box;
}
<h3>Flex</h3>
<div class="container-flex">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

<h3>Grid</h3>
<div class="container-grid">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

https://codepen.io/JoeHastings/pen/PeEjjR


Não do jeito que você quer com flex. Você tem que ser preciso com CSS-Grid,

<h3>Grid</h3>
<div class="container-grid">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item-mid">item</div>
</div>
.container-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
    .item {
        background: red;
        border: 1px solid;
    }
    .item-mid{
        background:purple;
        grid-column:2/1;
    }

Além disso, olhe aqui

Centralização na grade CSS

(isso não é embrulho, no entanto)


O Flex e o Grid são animais diferentes, então um comportamento que é simples em flex pode não se traduzir bem em grid.

Um item flexível pode centralizar no contêiner porque o layout flex funciona com linhas flexíveis . Uma linha flexível é uma linha ou coluna.

Quando um item flexível é solicitado a centralizar em uma linha / coluna, ele tem acesso ao espaço disponível na linha inteira, do início ao fim.

No layout da grade, no entanto, as linhas de grade precisam lidar com algo que as linhas flexíveis não fazem: rastrear paredes . Por exemplo, no seu código existem três colunas. Essas colunas dividem a linha de grade em três seções separadas e os itens da grade são confinados a uma seção.

Portanto, um item de grade não pode ser centralizado em uma linha usando as propriedades de alinhamento de palavra-chave (como justify-content ou justify-self ) porque as paredes que separam colunas restringem o movimento. Esse problema não existe em linhas flexíveis.

Para o item de grade ser centralizado na linha, o contêiner precisaria ter apenas uma coluna (isto é, sem divisores) ou o item precisaria ser explicitamente movido para o centro usando algo como posicionamento baseado em linha . Caso contrário, use o flexbox.





css-grid