0

Я не могу никак сделать чтоб верхние 2 элемента были width: 412px; height: 220px; color: #011E1E; А нижние 2 - width: 842px; height: 220px; color: #011E1E;

И это с помощью CSS Grid

Должно быть вот так:

Должно быть вот так

6
  • прежде чем задавать новый вопрос , стоит принять ответ на старый
    – qwerty
    3 дек 2020 в 13:06
  • Я не могу его принять 3 дек 2020 в 13:07
  • в чем проблема ? под вопросом есть галочка
    – qwerty
    3 дек 2020 в 13:07
  • Вы можете помочь, пожалуйста? 3 дек 2020 в 13:23
  • @RuslanMelikov ширину нижних элементов вы возможно имели ввиду 824, а не 842, да? 3 дек 2020 в 15:17

2 ответа 2

1

html, body { padding: 0; margin: 0;   width:100vw;
  height:100vh;}

.main{

}
.grid-container {
  display: grid;
  grid-template-columns: 412px 412px;
  grid-template-rows: 220px 220px 220px;
  gap: 0px 0px;
  grid-template-areas:
    "test1 test2"
    "test3 test3"
    "test4 test4";
  grid-gap : 10px; 
  ba #001f20;
}

.test1 { grid-area: test1;}

.test2 { grid-area: test2; }

.test3 { grid-area: test3; }

.test4 { grid-area: test4; }

.grid-container div{
   background:#011E1E;
  border-radius: 20px;
}
<div class="grid-container">
  <div class="test1"></div>
  <div class="test2"></div>
  <div class="test3"></div>
  <div class="test4"></div>
</div>

3
  • А как их сделать кликабельными? 3 дек 2020 в 20:16
  • @RuslanMelikov поместить туда например кнопку, с шириной и высотой 100%
    – qwerty
    4 дек 2020 в 5:17
  • @RuslanMelikov можете посмотреть, я добавил ссылку 4 дек 2020 в 14:56
0

.grid__container {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: minmax(50px, max-content);
  grid-template-areas: "a a";
  grid-gap: 10px;
}

.grid__item {
  background-color: green;
  padding: 10px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.grid__item:nth-child(n+3) {
  background-color: red;
}

.grid__item:nth-child(1),
.grid__item:nth-child(2) {
  grid-area: a;
}

.grid__link {
  color: inherit;
}

.grid__link::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #95d32a;
  z-index: -1;
  transition: background-color 0.1s linear;
}

.grid__link:hover::before {
  background-color: black;
}
<div class="grid__container">
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item">
    <a class="grid__link" href="https://css-tricks.com/">Тыкни меня!</a>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.