2

Estou seguindo o tutorial no w3school, ele está inserindo os itens, um abaixo do outro e não do lado (inline) !

De acordo com o meu código deveria ficar um do lado do outro:

CSS

* {
    box-sizing: border-box;
}

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;
    grid-gap: auto;
    background-color: #2196F3;
    padding: 0.5%;
}

.grid-row::after {
    content: "";
    clear: both;
    display: table;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .col-esm-1  {  width: 8.33%;   }
    .col-esm-2  {  width: 16.66%;  }
    .col-esm-3  {  width: 25%;  }
    .col-esm-4  {  width: 33.33%;  }
    .col-esm-5  {  width: 41.66%;  }
    .col-esm-6  {  width: 50%;  }
    .col-esm-7  {  width: 58.33%;  }
    .col-esm-8  {  width: 66.66%;  }
    .col-esm-9  {  width: 75%;  }
    .col-esm-10 {  width: 83.33%;  }
    .col-esm-11 {  width: 91.66%;  }
    .col-esm-12 {  width: 100%;  }
} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .col-sm-1   {  width: 8.33%;   }
    .col-sm-2   {  width: 16.66%;  }
    .col-sm-3   {  width: 25%;  }
    .col-sm-4   {  width: 33.33%;  }
    .col-sm-5   {  width: 41.66%;  }
    .col-sm-6   {  width: 50%;  }
    .col-sm-7   {  width: 58.33%;  }
    .col-sm-8   {  width: 66.66%;  }
    .col-sm-9   {  width: 75%;  }
    .col-sm-10  {  width: 83.33%;  }
    .col-sm-11  {  width: 91.66%;  }
    .col-sm-12  {  width: 100%;  }
} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .col-md-1   {  width: 8.33%;   }
    .col-md-2   {  width: 16.66%;  }
    .col-md-3   {  width: 25%;  }
    .col-md-4   {  width: 33.33%;  }
    .col-md-5   {  width: 41.66%;  }
    .col-md-6   {  width: 50%;  }
    .col-md-7   {  width: 58.33%;  }
    .col-md-8   {  width: 66.66%;  }
    .col-md-9   {  width: 75%;  }
    .col-md-10  {  width: 83.33%;  }
    .col-md-11  {  width: 91.66%;  }
    .col-md-12  {  width: 100%;  }
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .col-lg-1   {  width: 8.33%;   }
    .col-lg-2   {  width: 16.66%;  }
    .col-lg-3   {  width: 25%;  }
    .col-lg-4   {  width: 33.33%;  }
    .col-lg-5   {  width: 41.66%;  }
    .col-lg-6   {  width: 50%;  }
    .col-lg-7   {  width: 58.33%;  }
    .col-lg-8   {  width: 66.66%;  }
    .col-lg-9   {  width: 75%;  }
    .col-lg-10  {  width: 83.33%;  }
    .col-lg-11  {  width: 91.66%;  }
    .col-lg-12  {  width: 100%;  }
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .col-elg-1  {  width: 8.33%;   }
    .col-elg-2  {  width: 16.66%;  }
    .col-elg-3  {  width: 25%;  }
    .col-elg-4  {  width: 33.33%;  }
    .col-elg-5  {  width: 41.66%;  }
    .col-elg-6  {  width: 50%;  }
    .col-elg-7  {  width: 58.33%;  }
    .col-elg-8  {  width: 66.66%;  }
    .col-elg-9  {  width: 75%;  }
    .col-elg-10 {  width: 83.33%;  }
    .col-elg-11 {  width: 91.66%;  }
    .col-elg-12 {  width: 100%;  }
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/grid-system.css">
    <title></title>
</head>
<body>
    <div class="grid-container">
        <div class="grid-row">

                <div class="col-elg-3" style="background-color: red">1</div>
                <div class="col-elg-3" style="background-color: red">2</div>
                <div class="col-elg-3" style="background-color: red">3</div>
                <div class="col-elg-3" style="background-color: red;">4</div>


        </div>

    </div>

</body>
</html>
0

1 Resposta 1

4

Cara não sei como é o tutorial, mas parece que ficou faltando vc fazer a classe .grid-row

Peguei seu código e apenas adicionei o grid-template-columns: repeat(4, 1fr); que seria 4 colunas de 1fr

Onde vc repete 12x auto: grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;

Poderia ser: grid-template-columns: repeat(12, 1fr); 12 intervalos iguais de 1fr

OBS 1: Repare que se vc deletar a div <div class="grid-row"> o seu Grid vai encaixar no Grid principal, e as divs vão ficar na mesma linha.

OBS 2: Se vc colocar display:flex na <div class="grid-row"> também resolve o problema, só usei o grid-template pq não sei como vc quer montar o Grid completo então segui usando dispaly:grid

Veja como fica o código

* {
    box-sizing: border-box;
}

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;
    grid-gap: auto;
    background-color: #2196F3;
    padding: 0.5%;
}
.grid-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.grid-row::after {
    content: "";
    clear: both;
    display: table;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .col-esm-1  {  width: 8.33%;   }
    .col-esm-2  {  width: 16.66%;  }
    .col-esm-3  {  width: 25%;  }
    .col-esm-4  {  width: 33.33%;  }
    .col-esm-5  {  width: 41.66%;  }
    .col-esm-6  {  width: 50%;  }
    .col-esm-7  {  width: 58.33%;  }
    .col-esm-8  {  width: 66.66%;  }
    .col-esm-9  {  width: 75%;  }
    .col-esm-10 {  width: 83.33%;  }
    .col-esm-11 {  width: 91.66%;  }
    .col-esm-12 {  width: 100%;  }
} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .col-sm-1   {  width: 8.33%;   }
    .col-sm-2   {  width: 16.66%;  }
    .col-sm-3   {  width: 25%;  }
    .col-sm-4   {  width: 33.33%;  }
    .col-sm-5   {  width: 41.66%;  }
    .col-sm-6   {  width: 50%;  }
    .col-sm-7   {  width: 58.33%;  }
    .col-sm-8   {  width: 66.66%;  }
    .col-sm-9   {  width: 75%;  }
    .col-sm-10  {  width: 83.33%;  }
    .col-sm-11  {  width: 91.66%;  }
    .col-sm-12  {  width: 100%;  }
} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .col-md-1   {  width: 8.33%;   }
    .col-md-2   {  width: 16.66%;  }
    .col-md-3   {  width: 25%;  }
    .col-md-4   {  width: 33.33%;  }
    .col-md-5   {  width: 41.66%;  }
    .col-md-6   {  width: 50%;  }
    .col-md-7   {  width: 58.33%;  }
    .col-md-8   {  width: 66.66%;  }
    .col-md-9   {  width: 75%;  }
    .col-md-10  {  width: 83.33%;  }
    .col-md-11  {  width: 91.66%;  }
    .col-md-12  {  width: 100%;  }
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .col-lg-1   {  width: 8.33%;   }
    .col-lg-2   {  width: 16.66%;  }
    .col-lg-3   {  width: 25%;  }
    .col-lg-4   {  width: 33.33%;  }
    .col-lg-5   {  width: 41.66%;  }
    .col-lg-6   {  width: 50%;  }
    .col-lg-7   {  width: 58.33%;  }
    .col-lg-8   {  width: 66.66%;  }
    .col-lg-9   {  width: 75%;  }
    .col-lg-10  {  width: 83.33%;  }
    .col-lg-11  {  width: 91.66%;  }
    .col-lg-12  {  width: 100%;  }
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .col-elg-1  {  width: 8.33%;   }
    .col-elg-2  {  width: 16.66%;  }
    .col-elg-3  {  width: 25%;  }
    .col-elg-4  {  width: 33.33%;  }
    .col-elg-5  {  width: 41.66%;  }
    .col-elg-6  {  width: 50%;  }
    .col-elg-7  {  width: 58.33%;  }
    .col-elg-8  {  width: 66.66%;  }
    .col-elg-9  {  width: 75%;  }
    .col-elg-10 {  width: 83.33%;  }
    .col-elg-11 {  width: 91.66%;  }
    .col-elg-12 {  width: 100%;  }
}
<div class="grid-container">
    <div class="grid-row">

            <div class="col-elg-3" style="background-color: red">1</div>
            <div class="col-elg-3" style="background-color: red">2</div>
            <div class="col-elg-3" style="background-color: red">3</div>
            <div class="col-elg-3" style="background-color: red;">4</div>


    </div>

</div>


Imagem no DevTools, repare na linha pontilhada do template dos Grids inserir a descrição da imagem aqui

8
  • qual objeto deste código que você adicionou? pois não achei nenhum "repeat" no w3 referente a isto.. E outra, eu fiz da maneira correta?
    – user109930
    Commented 9/07/2018 às 20:46
  • @THIAGOSAAD o repeat() significa que vc vai repetir o tamanho do grid, então em vez de vc escrever 12 vez auto, auto, auto... vc pode só escrever repeat(12, 1fr). No caso como vc tinha 4 col-elg-3 eu repeti repeat(4, 1fr). Isso significa que são 4 intervalos de tamanho igual. Mas não sei exatamente o que vc pretende com o grid, da forma que vc montou as divs no html ficou um pouco estranho, pq é um Grid dentro de outro repare na imagem que eu postei que tem um gride de 12 colunas, mas na primeira célula tem outro grid com 4 colunas com os box vermelhos.
    – hugocsl
    Commented 9/07/2018 às 20:57
  • @THIAGOSAAD repare que se vc deletar a div <div class="grid-row"> o seu Grid vai encaixar no Grid principal, e as divs vão ficar na mesma linha. No Geral eu achei esse CSS meio estenho, parece que está misturando um Grid feito em Flex com um Grid Template. De qq forma espero que a resposta ajude
    – hugocsl
    Commented 9/07/2018 às 21:11
  • então o meu intuito é aprender o funcionamento dos frameworks, o do bootstrap por exemplo. Você tem algum material para eu aprender do jeito correto?
    – user109930
    Commented 10/07/2018 às 0:10
  • 1
    Isso aí garoto! Torço pelo çuçeçu!
    – Sam
    Commented 10/07/2018 às 1:53

Você deve fazer log-in para responder a esta pergunta.