CSSを使用してMicrosoft Edgeのグリッドを定義する方法

Question

次のCSSが定義されており、ChromeとFirefoxでは正常に動作しますが、Microsoft Edgeではグリッドの2行目のみが表示されます。 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; 
    }