CSS를 사용하여 Microsoft Edge 용 그리드를 정의하는 방법

Question

다음 CSS를 정의했으며 Chrome 및 Firefox에서는 잘 작동하지만 Microsoft Edge에서는 그리드의 두 번째 줄만 표시합니다. https://farquharmacrae.blogspot.com.au/2017/09/first-generation.html을 참조하십시오. Microsoft Edge에서 표시 할 전체 눈금에 대해 CSS를 어떻게 조정합니까? 이제 가장자리가 접두사없이 표 템플릿 - 열 및 표 자동 열을 지원하지 않습니까? 어떤 도움이라도 대단히 감사하겠습니다.

*, 
    *:before, 
    *:after { 
     box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     -ms-box-sizing: border-box; 
    } 

    .outer { 
    max-width: 1000px; 
    margin: 0 auto; 
    display: grid; 
    grid-gap: 1px; 
    } 

    /* no grid support? */ 
    .outer { 
    display: flex; 
    display: -ms-flex; /* Edge */ 
    display: -webkit-flex; /* Safari */  
    flex-wrap: wrap; 
    -ms-flex: wrap; 
    -webkit-flex: wrap; 
    } 

    .outer { 
    display: grid; 
    margin: 0 auto; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    grid-auto-rows: minmax(250px, auto); 
    } 

    .outer > * { 
     background-color: #fcf0ce; 
     color: #4a0f03; 
     font-size: 100%; 
     margin-bottom: 0px; 
    } 

    .holder { 
     margin-left: 1px; 
     margin-right: 1px; 
     /* needed for the flex layout */ 
     flex: 0 1 250px; 
     -ms-flex: 0 1 250px; 
     -webkit-flex: 0 1 250px; 
     } 

     .topic { 
     display: grid; 
     position: relative; 
     overflow: hidden; 
     cursor: pointer; 
     transition: transform 0.4s; 
     -webkit-transition: -webkit-transform 0.4s; 
     -moz-transition: -moz-transform 0.4s; 
    /* needed for the flex layout */ 
     flex: 0 1 250px; 
     -ms-flex: 0 1 250px; 
     -webkit-flex: 0 1 250px; 
     } 

    /* with background images defined for each grid item - here are two of */ 
    /* twelve - all with different images and background-size and position */ 
    /* adjust for each image */ 

    .grid1 { 
     background: url("image1") no-repeat; 
     background-size: cover; 
    } 

    .grid2{ 
    background: url("image2") no-repeat; 
    background-size: cover; 
    background-position: 35% 0; 
    } 

    /* and the overlay for each image */ 
    .figcaption { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    margin: 0; 
    width: 100%; 
    height: 100%; 
    opacity: 0.6; 
    z-index: 5; 
    cursor: pointer; 
    } 

.captiontext { 
    position: absolute; 
    display: inline-block; 
    padding: 10px; 
    bottom: 3%; 
    left: 0px; 
    width: 100%; 
    height: auto; 
    color: #fcceaa; 
    text-align: left; 
    font-size: 100%; 
    font-weight: bold; 
    background: rgba(55, 29, 9, 0.4); 
} 


    <div class="outer holder"> 
    <div class="topic grid1"> 
    <h2 class="captiontext">Caption1</h2> 
    <a class="figcaption" href="post1"></a> 
    </div> 
    <div class="topic grid2"> 
    <h2 class="captiontext">Caption2/h2> 
    <a class="figcaption" href="post2"></a> 
    </div> 
    . 
    . 
    . 
    </div> 

This is a screen capture of how the page appears in Edge This is the correct grid layout from Chrome

Answer 1

.topic 클래스에 높이와 폭을 추가하고 다른 브라우저에서와 같이 페이지를 중심으로되지는 않았지만 지금은, 가장자리에서 잘 작동

.topic { 
    display: grid; 
    position: relative; 
    width auto; 
    height: 250px; 
    overflow: hidden; 
    cursor: pointer; 
    transition: transform 0.4s; 
    -webkit-transition: -webkit-transform 0.4s; 
    -moz-transition: -moz-transform 0.4s; 
    /* needed for the flex layout */ 
    flex: 0 1 250px; 
    -ms-flex: 0 1 250px; 
    -webkit-flex: 0 1 250px; 
    }