CSS Grid LayoutのIE10以降対応（lessのmixinで書いてみた）

16930 ワード
less CSS CSS3 CSS テキストリンク
style.less
.grid (@name, @row, @column, @gap) {
  .row((@row * 2) - 1);
  .row (@i) when (@i > 0) {
    .column((@column * 2) - 1);
    .column (@j) when (@j > 0) {
      @n: ((((@i / 2) + 0.5) - 1) * @column)+((@j / 2) + 0.5);
      .@{name}-item:nth-of-type(@{n}) {
        -ms-grid-row: @i;
        -ms-grid-column: @j;
      }
      .column(@j - 2);
    }
    .row(@i - 2);
  }
  .@{name}-items {
    @ie-row: @row - 1;
    @ie-column: @column - 1;
    display: -ms-grid;
    display: grid;
    -ms-grid-rows:~'(1fr @{gap})[@{ie-row}] 1fr';
    -ms-grid-columns:~'(1fr @{gap})[@{ie-column}] 1fr';
    grid-template:~'repeat(@{row}, 1fr) / repeat(@{column}, 1fr)';
    grid-gap: @gap;
    font-size: 0;
  }
}

.grid(box, 3, 5, 10px);

.box {
  width: 1040px;
  margin: auto;
}

body {
  margin: 0;
  padding: 0;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
style.css
.box-item:nth-of-type(15) {
  -ms-grid-row: 5;
  -ms-grid-column: 9;
}
.box-item:nth-of-type(14) {
  -ms-grid-row: 5;
  -ms-grid-column: 7;
}
.box-item:nth-of-type(13) {
  -ms-grid-row: 5;
  -ms-grid-column: 5;
}
.box-item:nth-of-type(12) {
  -ms-grid-row: 5;
  -ms-grid-column: 3;
}
.box-item:nth-of-type(11) {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
}
.box-item:nth-of-type(10) {
  -ms-grid-row: 3;
  -ms-grid-column: 9;
}
.box-item:nth-of-type(9) {
  -ms-grid-row: 3;
  -ms-grid-column: 7;
}
.box-item:nth-of-type(8) {
  -ms-grid-row: 3;
  -ms-grid-column: 5;
}
.box-item:nth-of-type(7) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}
.box-item:nth-of-type(6) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}
.box-item:nth-of-type(5) {
  -ms-grid-row: 1;
  -ms-grid-column: 9;
}
.box-item:nth-of-type(4) {
  -ms-grid-row: 1;
  -ms-grid-column: 7;
}
.box-item:nth-of-type(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}
.box-item:nth-of-type(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
.box-item:nth-of-type(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
.box-items {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: (1fr 10px)[2] 1fr;
  -ms-grid-columns: (1fr 10px)[4] 1fr;
  grid-template: repeat(3, 1fr) / repeat(5, 1fr);
  grid-gap: 10px;
  font-size: 0;
}
.box {
  width: 1040px;
  margin: auto;
}
body {
  margin: 0;
  padding: 0;
}
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>GRID</title>
  <meta charset="utf-8">
  <link href="style.css" rel="stylesheet">
</head>
<body>
  <div class="box">
    <ul class="box-items">
      <li class="box-item"><img src="http://via.placeholder.com/200x200" alt="images"></li>
      <li class="box-item"><img src="http://via.placeholder.com/200x200" alt="images"></li>
      <li class="box-item"><img src="http://via.placeholder.com/200x200" alt="images"></li>
      <li class="box-item"><img src="http://via.placeholder.com/200x200" alt="images"></li>
      <li class="box-item"><img src="http://via.placeholder.com/200x200" alt="images"></li>
      <li class="box-item"><img src="http://via.placeholder.com/200x200" alt="images"></li>
      <li class="box-item"><img src="http://via.placeholder.com/200x200" alt="images"></li>
      <li class="box-item"><img src="http://via.placeholder.com/200x200" alt="images"></li>
      <li class="box-item"><img src="http://via.placeholder.com/200x200" alt="images"></li>
      <li class="box-item"><img src="http://via.placeholder.com/200x200" alt="images"></li>
      <li class="box-item"><img src="http://via.placeholder.com/200x200" alt="images"></li>
      <li class="box-item"><img src="http://via.placeholder.com/200x200" alt="images"></li>
      <li class="box-item"><img src="http://via.placeholder.com/200x200" alt="images"></li>
      <li class="box-item"><img src="http://via.placeholder.com/200x200" alt="images"></li>
      <li class="box-item"><img src="http://via.placeholder.com/200x200" alt="images"></li>
    </ul>
  </div>
</body>
</html>

参考

Should I try to use the IE implementation of CSS Grid Layout?