CSS 网格布局(IE 支持)

Question

我正在尝试使用 CSS 网格布局创建一个部分网站，它也需要在 IE10+ 中工作。它需要一个左列和两个右列。

布局示例:

CSS:

img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#page {
    display: -ms-grid;
    display: grid;
    width: 100%;
    height: 400px;

    -ms-grid-rows: 50% 50%;
    grid-template-rows: 50% 50%;

    -ms-grid-columns: 60% 40%;
    grid-template-columns: 60% 40%;
}
#page #left {
    -ms-grid-column: 1;
    grid-column: 1;

    -ms-grid-row: 2; 
    grid-row: 2/4;

    -ms-grid-row-span: 2;

    background-color: #ffa08c;

    margin-right: 5px;
}
#page #righttop {
    -ms-grid-column: 2;
    grid-column: 2;

    -ms-grid-row: 1;
    grid-row: 1;

    background-color: #ffff64;

    margin-left: 5px;
    margin-bottom: 5px;
}
#page #rightbottom {        
    -ms-grid-column: 2;
    grid-column: 2;

    -ms-grid-row: 2;
    grid-row: 2;

    background-color: #8cffa0;

    margin-left: 5px;
    margin-top: 5px;
}

HTML:

<section id="page">
  <div id="left">
    <img src="https://media.licdn.com/mpr/mpr/AAEAAQAAAAAAAAq1AAAAJGYzMThlNTdiLWQ4YjEtNDFiMi1hNmExLWEzOTZmM2Y2NjMwYg.jpg">
  </div>
  <div id="righttop">
    <img src="https://media.licdn.com/mpr/mpr/AAEAAQAAAAAAAAq1AAAAJGYzMThlNTdiLWQ4YjEtNDFiMi1hNmExLWEzOTZmM2Y2NjMwYg.jpg">
  </div>
  <div id="rightbottom">
    <img src="https://media.licdn.com/mpr/mpr/AAEAAQAAAAAAAAq1AAAAJGYzMThlNTdiLWQ4YjEtNDFiMi1hNmExLWEzOTZmM2Y2NjMwYg.jpg">
  </div>

我想我快到了，但无法让左列拉伸(stretch)右列的高度。

Codepen example

Answer 1

试试下面的代码，看看它是否适用于你的 IE(它适用于我的 IE 11)。主要变化是使用命名的行和列来构建模板:

img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#page {
    display: -ms-grid;
    display: grid;
    width: 100%;
    height: 400px;
    grid-gap: 5px;

    -ms-grid-rows: 
      [top-start] 1fr 
      [top-end] 1fr;
    grid-template-rows: 
      [top-start] 1fr 
      [top-end] 1fr;

    -ms-grid-columns: 
      [left-img-start] 3fr 
      [right-img-start] 2fr;
    grid-template-columns: 
      [left-img-start] 3fr 
      [right-img-start] 2fr;
}
#page #left {
    -ms-grid-column: left-img-start;
    grid-column: left-img-start;

    -ms-grid-row: top-start / span 2;
    grid-row: top-start / span 2;

    background-color: #ff0;
}
#page #righttop {
    -ms-grid-column: right-img-start;
    grid-column: right-img-start;
    background-color: #ffff64;
}
#page #rightbottom {        
    background-color: #8cffa0;
}