Столбцы CSS Grid не плавают в Chrome и Firefox, но в IE и Edge

Question

Я пытаюсь создать простую сетку с использованием CSS, похожую на bootstrap. Вот page at CodePen. код CSS является:

/* 
* light blue = 00AEEF 
* dark blue = 1C75BC 
* green = 8DC63F 
* dark green = 009444 
* orange = F7941E 
* dark orange = F15A29 
* brown = 594A42 
*/ 


/*************************** 
**************************** 
Reset Styles 
**************************** 
***************************/ 
@import 'normalize.css' 

/* Change all elements to use border-box */ 
html{ 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

*, *:before, *:after{ 
    box-sizing: inherit; 
} 

/*************************** 
**************************** 
Base Styles 
**************************** 
***************************/ 
body{ 
    color: #414042 /* Dark Grey */ 
    font-family: Arial, Helvetica, sans-serif; 
    font-weight: normal; 
} 

h1, h2, h3{ 
    font-weight: bold; 
} 

a{ 
    color: #8dc63f; /* Green */ 
    font-weight: bold; 
} 

a:hover{ 
    text-decoration: underline; 
} 

/*************************** 
**************************** 
Layout Styles 
**************************** 
***************************/ 
.container{ 
    padding-left: 15px; 
    padding-right: 15px; 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 1170px; 
} 

.row{ 
    margin-right: -15px; 
    margin-left: -15px; 
} 

/* ":after" is a pseudo-element (NOT a pseudo-class) */ 
.row::after{ 
    content: ""; 
    display: table; 
    clear: both; 
} 

/* This targets all classes that contain the word "col-" */ 
[class*='col-']{ 
    width: 100%; 
    padding-left: 15px; 
    padding-right: 15px; 
} 

/* Media query excludes extra-small devices and includes small and above */ 
@media (min-width: 48em) { 
    [class*='col-']{ 
     float: left; 

    } 

    /* Column One Third */ 
    .col-1-3{ 
     width: 33.3333%; 
     background: red; 
    } 

    /* Column Two Thirds */ 
    .col-2-3{ 
     width: 66.6666%; 
     background: blue; 
    } 
} 




/*************************** 
**************************** 
Module Styles 
**************************** 
***************************/ 


/*************************** 
**************************** 
Theme Styles 
**************************** 
***************************/ 
.background-primary{ 
    background: #F7941E; /* Orange */ 
} 

.background-secondary{ 
    background: #00AEEf; /* Blue */ 
} 

.background-tertiary{ 
    background: #8DC63F; /* Green */ 
} 

HTML-код:

<header class="background-primary"> 
    <div class="container"> 
     Header Content 
    </div> 
    </header> 

    <main> 
    <section class="background-secondary"> 
     <div class="container"> 
      Hero Primary Content 
     </div> 
    </section> 

    <section> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-1-3"> 
        Circle Image 
       </div> 
       <div class="col-2-3"> 
        Content Area 
       </div> 
      </div> <!-- End row --> 
     </div> <!-- End Container --> 
    </section> 



    <section> 
     <div class="container"> 
      Featured Content 
     </div> 
    </section> 

    <section class="background-primary"> 
     <div class="container"> 
      Testimonial Content 
     </div> 
    </section> 

    <section class="background-secondary"> 
     <div class="container"> 
      Media Objects 
     </div> 
    </section> 

    <section class="background-tertiary"> 
     <div class="container"> 
      More Content 
     </div> 
    </section> 
    </main> 

    <footer class="background-primary"> 
    <div class="container"> 
     Footer Content 
    </div> 
    </footer> 

В IE и Edge, как "Circle Image" и "Content Area" плавает, как ожидается, и появляется горизонтально , Но при просмотре в Chrome или Firefox они располагаются вертикально (по крайней мере, на моей стороне). Я подозреваю, что это из-за заполнения, но почему IE способен правильно обрабатывать его, в то время как другие браузеры терпят неудачу? Это известная ошибка?

(я извиняюсь, если это наивный вопрос, но я новичок в веб-разработки)

Answer 1

Поскольку вы сказали «похож на самонастройки» я предположитьвы не используете/не желаю использовать его (почему?)

Теперь давайте поговорим о сетях.

В сетке Некоторые измерения должны быть указаны, чтобы он хорошо работал. Я бы тоже обернул все это в <div>, чтобы сдержать это.

Если вы сделаете это и вы сказать элементам быть красиво и не превышать ширину их родительского контейнера - с помощью {max-width:100%} - вы получите хорошую отзывчивую сетку. как так:

(открытый фрагмент кода в полноэкранным и размер окно, чтобы увидеть, как элементы стек/деинсталлировать стек в соответствии с шириной экрана)

/* Start Grid CSS */ 
 

 
.myitem { 
 
    display: inline-block; 
 
    width: 300px; 
 
    max-height: 260px; 
 
    border-bottom: 1px solid #555; 
 
} 
 
.mycoolcontainer, 
 
.myitem { 
 
    margin: .4em; 
 
} 
 
img, 
 
.mycoolcontainer, 
 
.myitem { 
 
    max-width: 100%; 
 
} 
 
/* End CSS */ 
 

 
/* Start visusals */ 
 

 
body { 
 
    background: #131418; 
 
    color: #999; 
 
    text-align: center; 
 
} 
 
.dark { 
 
    box-shadow: inset 0 0 50px 30px rgba(0, 0, 0, 0.5); 
 
} 
 
#bg1 { 
 
    background: gray 
 
} 
 
#bg2 { 
 
    background: teal 
 
} 
 
#bg3 { 
 
    background: darkgreen 
 
} 
 
#bg4 { 
 
    background: LightSkyBlue 
 
} 
 
#bg5 { 
 
    background: brown 
 
} 
 
#bg6 { 
 
    background: DarkSeaGreen 
 
} 
 
#bg7 { 
 
    background: BurlyWood 
 
} 
 
#bg8 { 
 
    background: Salmon 
 
} 
 
/* End visusals */

<div class="mycoolcontainer"> 
 

 

 
    <div class="myitem dark" id="bg1"> 
 
    <img src="https://unsplash.it/400/295/?random">Title 
 
    </div> 
 

 
    <div class="myitem dark" id="bg2"> 
 
    <img src="https://unsplash.it/400/296/?random">Title 
 
    </div> 
 

 
    <div class="myitem dark" id="bg3"> 
 
    <img src="https://unsplash.it/400/297/?random">Title 
 
    </div> 
 

 
    <div class="myitem dark" id="bg4"> 
 
    <img src="https://unsplash.it/400/298/?random">Title 
 
    </div> 
 

 
    <div class="myitem dark" id="bg5"> 
 
    <img src="https://unsplash.it/400/299/?random">Title 
 
    </div> 
 

 
    <div class="myitem dark" id="bg6"> 
 
    <img src="https://unsplash.it/400/300/?random">Title 
 
    </div> 
 

 
    <div class="myitem dark" id="bg7"> 
 
    <img src="https://unsplash.it/400/301/?random">Title 
 
    </div> 
 

 
    <div class="myitem dark" id="bg8"> 
 
    <img src="https://unsplash.it/400/302/?random">Title 
 
    </div> 
 

 

 
    <div class="myitem dark" id="bg1"> 
 
    <img src="https://unsplash.it/400/303/?random">Title 
 
    </div> 
 

 
    <div class="myitem dark" id="bg2"> 
 
    <img src="https://unsplash.it/400/304/?random">Title 
 
    </div> 
 

 
    <div class="myitem dark" id="bg3"> 
 
    <img src="https://unsplash.it/400/305/?random">Title 
 
    </div> 
 

 
</div>