このエリアにある7枚のカードから、動かしたいカードをクリックして決定。
左上のスライダーの値を操作して配置を編集します。

編集が完了して希望のレイアウトができたら、右上の2つのボタンを押して
html, css をそれぞれコピー(要都度ペースト)。お手元に用意したhtmlファイル、cssファイルにそれぞれ
ペーストして、作成したレイアウトを使用できます。

display.grid.tedate

display: grid による Bento UI のサンプルが生成できます。

使い方

縦横幅の調整

横方向

縦方向

1番目:gridColumnStart {{labelDisplay}}：{{gridPositionOne.gridColumnStart}}

1番目:gridColumnEnd {{labelDisplay}}：{{gridPositionOne.gridColumnEnd}}

1番目:gridRowStart {{labelDisplay}}：{{gridPositionOne.gridRowStart}}

1番目:gridRowEnd {{labelDisplay}}：{{gridPositionOne.gridRowEnd}}

2番目:gridColumnStart {{labelDisplay}}：{{gridPositionTwo.gridColumnStart}}

2番目:gridColumnEnd {{labelDisplay}}：{{gridPositionTwo.gridColumnEnd}}

2番目:gridRowStart {{labelDisplay}}：{{gridPositionTwo.gridRowStart}}

2番目:gridRowEnd {{labelDisplay}}：{{gridPositionTwo.gridRowEnd}}

3番目:gridColumnStart {{labelDisplay}}：{{gridPositionThree.gridColumnStart}}

3番目:gridColumnEnd {{labelDisplay}}：{{gridPositionThree.gridColumnEnd}}

3番目:gridRowStart {{labelDisplay}}：{{gridPositionThree.gridRowStart}}

3番目:gridRowEnd {{labelDisplay}}：{{gridPositionThree.gridRowEnd}}

4番目:gridColumnStart {{labelDisplay}}：{{gridPositionFour.gridColumnStart}}

4番目:gridColumnEnd {{labelDisplay}}：{{gridPositionFour.gridColumnEnd}}

4番目:gridRowStart {{labelDisplay}}：{{gridPositionFour.gridRowStart}}

4番目:gridRowEnd {{labelDisplay}}：{{gridPositionFour.gridRowEnd}}

5番目:gridColumnStart {{labelDisplay}}：{{gridPositionFifth.gridColumnStart}}

5番目:gridColumnEnd {{labelDisplay}}：{{gridPositionFifth.gridColumnEnd}}

5番目:gridRowStart {{labelDisplay}}：{{gridPositionFifth.gridRowStart}}

5番目:gridRowEnd {{labelDisplay}}：{{gridPositionFifth.gridRowEnd}}

6番目:gridColumnStart {{labelDisplay}}：{{gridPositionSixth.gridColumnStart}}

6番目:gridColumnEnd {{labelDisplay}}：{{gridPositionSixth.gridColumnEnd}}

6番目:gridRowStart {{labelDisplay}}：{{gridPositionSixth.gridRowStart}}

6番目:gridRowEnd {{labelDisplay}}：{{gridPositionSixth.gridRowEnd}}

7番目:gridColumnStart {{labelDisplay}}：{{gridPositionSeventh.gridColumnStart}}

7番目:gridColumnEnd {{labelDisplay}}：{{gridPositionSeventh.gridColumnEnd}}

7番目:gridRowStart {{labelDisplay}}：{{gridPositionSeventh.gridRowStart}}

7番目:gridRowEnd {{labelDisplay}}：{{gridPositionSeventh.gridRowEnd}}

gridColumnStart

作成したグリッドレイアウトの使用

htmlとcssをコピーして使用できます。

htmlをコピーするmdi-clipboard-multiple-outline

作成した display: grid のhtmlをコピーできます。

cssをコピーするmdi-clipboard-multiple-outline

作成した display: grid のcssをコピーできます。

display: grid; プロパティを使ったカード型レイアウト

.my-container {
  display: grid;
  gap: 0.5rem 1%;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.5fr 0.5fr 0.5fr 0.5fr;
  margin: 0 auto;
  width: 1200px;
}

.my-item {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  position: relative;
  z-index: 10;
}
.my-item::before {
  background: none;
  content: "";
  font-size: 56px;
  font-weight: 700;
  left: 1rem;
  line-height: 1;
  opacity: 0.7;
  top: 0.5rem;
  position: absolute;
}
.my-item.target-element {
  color: #e1e1e1;
  z-index: 100;
}

.my-item.is-first {
  grid-column-start: {{gridPositionOne.gridColumnStart}};
  grid-column-end: {{gridPositionOne.gridColumnEnd}};
  grid-row-start: {{gridPositionOne.gridRowStart}};
  grid-row-end: {{gridPositionOne.gridRowEnd}};
}
.my-item.is-first::before {
  content: "01";
}

.my-item.is-second {
  grid-column-start: {{gridPositionTwo.gridColumnStart}};
  grid-column-end: {{gridPositionTwo.gridColumnEnd}};
  grid-row-start: {{gridPositionTwo.gridRowStart}};
  grid-row-end: {{gridPositionTwo.gridRowEnd}};
}
.my-item.is-second::before {
  content: "02";
}

.my-item.is-third {
  grid-column-start: {{gridPositionThree.gridColumnStart}};
  grid-column-end: {{gridPositionThree.gridColumnEnd}};
  grid-row-start: {{gridPositionThree.gridRowStart}};
  grid-row-end: {{gridPositionThree.gridRowEnd}};
}
.my-item.is-third::before {
  content: "03";
}

.my-item.is-fourth {
  grid-column-start: {{gridPositionFour.gridColumnStart}};
  grid-column-end: {{gridPositionFour.gridColumnEnd}};
  grid-row-start: {{gridPositionFour.gridRowStart}};
  grid-row-end: {{gridPositionFour.gridRowEnd}};
}
.my-item.is-fourth::before {
  content: "04";
}

.my-item.is-fifth {
  grid-column-start: {{gridPositionFifth.gridColumnStart}};
  grid-column-end: {{gridPositionFifth.gridColumnEnd}};
  grid-row-start: {{gridPositionFifth.gridRowStart}};
  grid-row-end: {{gridPositionFifth.gridRowEnd}};
}
.my-item.is-fifth::before {
  content: "05";
}

.my-item.is-sixth {
  grid-column-start: {{gridPositionSixth.gridColumnStart}};
  grid-column-end: {{gridPositionSixth.gridColumnEnd}};
  grid-row-start: {{gridPositionSixth.gridRowStart}};
  grid-row-end: {{gridPositionSixth.gridRowEnd}};
}
.my-item.is-sixth::before {
  content: "06";
}

.my-item.is-seventh {
  grid-column-start: {{gridPositionSeventh.gridColumnStart}};
  grid-column-end: {{gridPositionSeventh.gridColumnEnd}};
  grid-row-start: {{gridPositionSeventh.gridRowStart}};
  grid-row-end: {{gridPositionSeventh.gridRowEnd}};
}
.my-item.is-seventh::before {
  content: "07";
}

.my-figure {
  background: #e7e7e7;
  height: 180px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

.my-image {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.my-description {
  font-size: 0.875rem;
  height: 80px;
  padding: 1rem;
}

.my-text {
  margin: 0;
}

<section>
  <div class="card-wrapper">
    <div class="my-container">
      <div class="my-item is-first">
        <div class="my-figure"></div>
        <div class="my-description">
          <p class="my-text">display: grid; プロパティを使ったカード型レイアウト</p>
        </div>
      </div>
      <div class="my-item is-second">
        <div class="my-figure"></div>
        <div class="my-description">
          <p class="my-text">display: grid; プロパティを使ったカード型レイアウト</p>
        </div>
      </div>
  
      <div class="my-item is-third">
        <div class="my-figure"></div>
        <div class="my-description">
          <p class="my-text">display: grid; プロパティを使ったカード型レイアウト</p>
        </div>
      </div>
      
      <div class="my-item is-fourth">
        <div class="my-figure"></div>
        <div class="my-description">
          <p class="my-text">display: grid; プロパティを使ったカード型レイアウト</p>
        </div>
      </div>
  
      <div class="my-item is-fifth">
        <div class="my-figure"></div>
        <div class="my-description">
          <p class="my-text">display: grid; プロパティを使ったカード型レイアウト</p>
        </div>
      </div>
  
      <div class="my-item is-sixth">
        <div class="my-figure"></div>
        <div class="my-description">
          <p class="my-text">display: grid; プロパティを使ったカード型レイアウト</p>
        </div>
      </div>

      <div class="my-item is-seventh">
        <div class="my-figure"></div>
        <div class="my-description">
          <p class="my-text">display: grid; プロパティを使ったカード型レイアウト</p>
        </div>
      </div>
    </div>

  </div>
</section>