移动网格中的按钮具有不同的大小

Question

我有网格，我有不同大小的div。在div中我有按钮，我尝试将它们放在每个网格的底部。 （看看img我尝试做什么）我知道我可以用类做。但我想知道是否有任何方法只需一个元素按钮就可以将所有按钮移动到网格中的一个位置，或者我必须为那个长网格div定义另一个类。

.grid-container {
  display: grid;
  grid-template-areas: "a a b c" "a a b c" "a a b c" "a a b c" "d e b c" "d e b c" "d e b c" "d e b c" "d e f f" "d e f f" "d e f f" "d e f f";
  grid-gap: 30px;
  height: 900px;
  padding: 10px;
  margin: auto;
  width: 80%;
  margin-bottom: 100px;
}

.grid-container>div {
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  border-radius: 10px;
  box-shadow: 10px 9px 33px -12px rgba(0, 0, 0, 0.95);
  color: #fff;
}

.item1 {
  grid-area: a;
  background-image: linear-gradient(-70deg, #fff, rgb(52, 206, 167), rgb(19, 172, 133));
}

.item2 {
  grid-area: b;
  background-image: linear-gradient(-90deg, #0F2027, #0F2027);
}

.item3 {
  grid-area: c;
  background-image: linear-gradient(180deg, #F2994A, #F2C94C)
}

.item4 {
  grid-area: d;
  background-image: linear-gradient(180deg, #2980B9, #6DD5FA, #fff);
}

.item5 {
  grid-area: e;
  background-image: linear-gradient(180deg, #faaca8, #ddd6f3, #faaca8)
}

.item6 {
  grid-area: f;
  background-image: linear-gradient(-90deg, #2980B9, #6DD5FA, #fff);
}

button.item {
  display: grid;
  padding: 12px 18px;
  font-size: 13px;
  border-radius: 10px;
  border: 1px solid #fff;
  background-color: transparent;
  color: rgb(255, 255, 255);
  position: relative;
  top: 190px;
  left: 30px;
  cursor: pointer;
}

<div class="grid-container">
  <div class="item1"><button class="item">Read More</button> 1</div>
  <div class="item2"><button class="item">Read More</button> 2</div>
  <div class="item3"><button class="item">Read More</button> 3</div>
  <div class="item4"><button class="item">Read More</button> 4</div>
  <div class="item5"><button class="item">Read More</button> 5</div>
  <div class="item6"><button class="item">Read More</button> 6</div>
</div>

Answer 1

将position: relative;添加到网格项（.grid-container>div）。这允许您将按钮放置在各自的容器中。

将position: absolute;以及bottom和left值添加到按钮以将它们放置在左下角。

.grid-container {
  display: grid;
  grid-template-areas: "a a b c" "a a b c" "a a b c" "a a b c" "d e b c" "d e b c" "d e b c" "d e b c" "d e f f" "d e f f" "d e f f" "d e f f";
  grid-gap: 30px;
  height: 900px;
  padding: 10px;
  margin: auto;
  width: 80%;
  margin-bottom: 100px;
}

.grid-container>div {
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  border-radius: 10px;
  box-shadow: 10px 9px 33px -12px rgba(0, 0, 0, 0.95);
  color: #fff;
  position: relative;
}

.item1 {
  grid-area: a;
  background-image: linear-gradient(-70deg, #fff, rgb(52, 206, 167), rgb(19, 172, 133));
}

.item2 {
  grid-area: b;
  background-image: linear-gradient(-90deg, #0F2027, #0F2027);
}

.item3 {
  grid-area: c;
  background-image: linear-gradient(180deg, #F2994A, #F2C94C)
}

.item4 {
  grid-area: d;
  background-image: linear-gradient(180deg, #2980B9, #6DD5FA, #fff);
}

.item5 {
  grid-area: e;
  background-image: linear-gradient(180deg, #faaca8, #ddd6f3, #faaca8)
}

.item6 {
  grid-area: f;
  background-image: linear-gradient(-90deg, #2980B9, #6DD5FA, #fff);
}

button.item {
  padding: 12px 18px;
  font-size: 13px;
  border-radius: 10px;
  border: 1px solid #fff;
  background-color: transparent;
  color: rgb(255, 255, 255);
  position: absolute;
  bottom: 30px;
  left: 30px;
  cursor: pointer;
}

<div class="grid-container">
  <div class="item1"><button class="item">Read More</button> 1</div>
  <div class="item2"><button class="item">Read More</button> 2</div>
  <div class="item3"><button class="item">Read More</button> 3</div>
  <div class="item4"><button class="item">Read More</button> 4</div>
  <div class="item5"><button class="item">Read More</button> 5</div>
  <div class="item6"><button class="item">Read More</button> 6</div>
</div>