Distribution problem for COLUMNS in CSS3

Question

Distribution problem for COLUMNS in CSS3

Navigation

#1 by (4 votes)

2

I'm following the tutorial on w3school , it's inserting the items, one below the other and not on the (inline) side!

According to my code should stay side by side:

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>

html5 css3 layout-responsivo

asked by anonymous 09.07.2018 / 22:18

1 answer

"Join" elements of a single vector Merge a feature with multiple commits over time in another project

score 4 · Answer 1

I do not know how the tutorial is, but it seems that it was missing you doing the .grid-row class

I took your code and just added grid-template-columns: repeat(4, 1fr); which would be 4 columns of 1fr

Where do you repeat 12x auto: grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;

It could be: grid-template-columns: repeat(12, 1fr); 12 equal intervals of 1fr

OBS 1: Note that if you delete the div <div class="grid-row"> your Grid will fit into the main Grid, and the divs will stay on the same line.

If you put display:flex in <div class="grid-row"> it also solves the problem, I only used grid-template pq I do not know how you want to mount the complete Grid so I continued using dispaly:grid

See what the code looks like

* {
    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>

Image in DevTools, notice the dotted line of the Grids template