<!-- 標準的な例 -->
<div class="container">
  <div class="item">HTML</div>
  <div class="item">CSS</div>
  <div class="item">JavaScript</div>
  <div class="item">Python</div>
  <div class="item">WordPress</div>
  <div class="item">Ruby</div>
</div>

<hr>

<!--上１つ大きいタイプ  -->
<h1>上１つ大きいタイプ</h1>
<div class="container2">
  <div class="item1">HTML</div>
  <div class="item2">CSS</div>
  <div class="item3">JavaScript</div>
  <div class="item4">Python</div>
  <div class="item5">WordPress</div>
  <div class="item6">Ruby</div>
</div>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.item {
  background: #0bd;
  padding: 10px;
}



.container2 {
  margin: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 80px;
  gap: 10px;
}

.item1 {
  background: #0bd;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  padding: 10px;
}

.item2 {
  background: #0bd;
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
  padding: 10px;
}

.item3 {
  background: pink;
}

.item4 {
  background: red;
}

.item5 {
  background: gold;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.