перемещать кнопки в сетке с разными размерами - PullRequest
Новая
       13

перемещать кнопки в сетке с разными размерами

0 голосов
/ 12 февраля 2019

У меня есть сетка, где у меня есть разные размеры div.В div у меня есть кнопки, где я пытаюсь расположить их в нижней части каждой сетки.(посмотрите, что я пытаюсь сделать) Я знаю, что могу делать это с классами.Но я хотел бы знать, есть ли способ переместить все кнопки в одно место в сетке с помощью всего одного элемента button или я должен определить другой класс для этой длинной сетки div.

What i want

.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>

1 Ответ

0 голосов
/ 12 февраля 2019

Добавьте 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>
...