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

Question

我有网格，其中有不同大小的div。在div中，我有一些按钮，尝试将它们放置在每个网格的底部。 （看img我要做什么）我知道我可以用类来做到。但是我想知道是否有办法只用一个元素 button 将所有按钮移到网格中的某个位置，否则我必须为该长网格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>