Olá, preciso de uma grid centralizada usando bootstrap, consegui fazer isso usando flex
e justify-content-center
:
.item {
border: dashed 1px blue;
padding: 5px;
}
.container {
border: solid 1px black;
padding: 20px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<div class="d-flex flex-wrap justify-content-center container">
<div class="item">Conteudo 01</div>
<div class="item">Conteudo 02</div>
<div class="item">Conteudo 03</div>
<div class="item">Conteudo 04</div>
<div class="item">Conteudo 05</div>
<div class="item">Conteudo 06</div>
<div class="item">Conteudo 07</div>
<div class="item">Conteudo 08</div>
</div>
No entanto, repare que quando a linha é quebrada, as divs que vão para baixo ficam centralizadas também, há alguma forma de, após quebrar a linha, as divs que sobraram ficarem alinhadas á esquerda?
O resultado esperado seria assim:
Edit: Consegui fazer sem usar Bootstrap
.container {
border: solid 1px black;
padding: 20px;
}
.containerGrid {
border: solid 1px red;
padding: 10px;
display: grid;
grid-template-columns: 100px 100px 100px 100px;
width: min-content;
/* Centralizando Container */
position: relative;
left: 50%;
transform: translateX(-50%)
}
.item {
text-align: center;
border: dashed 1px blue;
padding: 5px;
}
<div class="container">
<div class="containerGrid">
<div class="item">Conteudo 01</div>
<div class="item">Conteudo 02</div>
<div class="item">Conteudo 03</div>
<div class="item">Conteudo 04</div>
<div class="item">Conteudo 05</div>
<div class="item">Conteudo 06</div>
<div class="item">Conteudo 07</div>
<div class="item">Conteudo 08</div>
<div class="item">Conteudo 09</div>
</div>
</div>
Repare que, após a quebra de linha, os items
div vão para o lado esquerdo do container, e todos os itens do container se mantêm centralizados.