CSS Grid - дизайн доски настроения

Question

Я пытаюсь создать макет наподобие этой доски настроения с помощью CSS-сеток:

Я бы хотел, чтобы каждый раздел был изображением и ссылкой,

Я не могу заставить его работать, хотя я не самый большой эксперт по сеткам.Кажется, я ничего не могу найти при поиске в Интернете.

Возможно ли это или пронзительный поток?Любое направление будет оценено.

Answer 1

Вы можете создать 2x2 CSS-сетку, установить толстые белые границы для 4-х делителей, а затем поместить 5-й делитель вне сетки с более высоким z-индексом в центре, с прозрачной границей с радиусом границы 50%, белым фоном,и толстые отступы, а затем центрировать изображение.Таким образом, вы просто закрываете центр своей простой сетки 2х2.

Answer 2

С фоновым изображением:

.container {
  width:410px;
  height:610px;
  background:#fff;
  box-shadow:0 0 5px 0 rgba(0,0,0,.5);
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-gap:10px;
  padding:10px;
  position:relative;
}

.div1, .div2, .div3, .div4{
  background:#e0e0e0;
  height:300px;
  width:200px;
  background-size:cover;
  background-repeat:no-repeat;
}

.div1 {
  background:url('https://picsum.photos/200/300');
}

.div2 {
  background:url('https://picsum.photos/200/500');
}

.div3 {
  background:url('https://picsum.photos/200/700');
}

.div4 {
  background:url('https://picsum.photos/400/800');
}

.circle {
  height:220px;
  width:220px;
  border-radius:50%;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background: radial-gradient(#e0e0e0 0px, #e0e0e0 100px, #fff 100px, #fff 110px);
}

.circle_bg {
  position:absolute;
  background:url('https://picsum.photos/200/200');
  width:200px;
  height:200px;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
}

<div class="container">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="div4"></div>
  <div class="circle"></div>
  <div class="circle_bg"></div>
</div>

То же, что и ваше шоу:

.container {
  width:410px;
  height:610px;
  background:#fff;
  box-shadow:0 0 5px 0 rgba(0,0,0,.5);
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-gap:10px;
  padding:10px;
  position:relative;
}

.div1, .div2, .div3, .div4{
  background:#e0e0e0;
  height:300px;
  width:200px;
}

.circle {
  height:220px;
  width:220px;
  border-radius:50%;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background: radial-gradient(#e0e0e0 0px, #e0e0e0 100px, #fff 100px, #fff 110px);
}

<div class="container">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="div4"></div>
  <div class="circle"></div>
</div>