it-roy-ru.com

Предотвращение двойных границ в CSS Grid

Учитывая текущий пример сетки CSS, как я могу свернуть границы, чтобы избежать двойных границ?

Это такая простая вещь, чтобы достичь с помощью таблицы Html. Как мне сделать это с помощью display: grid?

.wrapper {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
}

.wrapper > div {
  padding: 15px;
  text-align: center;
  border: 1px solid black;
}
<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

11
klugjo

Вы можете сделать так:

.wrapper {
  display: inline-grid;
  grid-template-columns: 50px 50px 50px 50px;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
}

.wrapper > div {
  padding: 15px;
  text-align: center;
  border-top: 1px solid black;
  border-right: 1px solid black;
}

body {
 background:pink;
}
<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

Другая идея заключается в том, чтобы полагаться на градиент для заполнения пробелов, как показано ниже:

.wrapper {
  display: inline-grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-gap:1px;
  background:
    linear-gradient(#000,#000) center/100% 1px no-repeat,
    repeating-linear-gradient(to right,
        transparent ,transparent 50px,
        #000 50px,#000 51px);
  border:1px solid;
}

.wrapper > div {
  padding: 15px;
  text-align: center;
}

body {
 background:pink;
}
<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

9
Temani Afif

Вместо использования реальной границы вокруг элементов сетки, используйте цвет фона на контейнере (для цвета "border") и свойство grid-gap (для ширины "border").

.wrapper {
  display: inline-grid;
  grid-template-columns: 50px 50px 50px 50px;
  border: 1px solid black;
  grid-gap: 1px;
  background-color: black;
}

.wrapper > div {
  background-color: white;
  padding: 15px;
  text-align: center;
}
<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

17
Michael_B

.wrapper {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
}

.wrapper > div {
  padding: 15px;
  text-align: center;
  border: 1px solid black;
  margin:0 -1px -1px 0;
}
<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

margin:0 -1px -1px 0; 

Это должно сделать свое дело.

7
Krzysztof Mazur

Что-то, что я использовал с успехом, - это просто добавление тени блока к элементам сетки вместе с пробелом в столбцах и строках. Это тогда позволяет размеру столбцов всегда быть точно таким, как определено в grid-template-columns. Затем простое изменение разрыва между столбцами и строками и размером тени блока позволяет получить более толстую границу. 

.wrapper {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-column-gap: 1px;
  grid-row-gap: 1px;
}
.wrapper > div {
  padding: 15px;
  text-align: center;
  box-shadow: 0 0 0 1px;
}
<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

1
dan richardson

Беспроигрышный код будет установлен

  • элементы сетки: граница снизу и граница справа
  • сетка-обертка: граница сверху и граница слева

Так что это будет исправлено, даже если верхние столбцы не равны нижним столбцам

.wrapper {
  display: inline-grid;
  grid-template-columns: 50px 50px 50px 50px;
  border-top: 1px solid black;
  border-left: 1px solid black;
}

.wrapper > div {
  padding: 15px;
  text-align: center;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>
0
okater

Я нашел решение, используя свойство outline.

.grid {
	width: 100%;
	height: 700px;
	display: grid;
	grid-template-columns: repeat(4, 25fr);
	grid-template-rows: repeat(4, 25fr);
	margin-bottom: 30px;
}

.grid-item {
	background-color: silver;
	outline: 1px solid gray; /* The outline creates the border */
	text-align: center;
	position: relative;
	z-index: 1; /* original z-index */
}

/* If you want to change the color on the hover state */
.grid-item:hover {
	outline: 1px solid red;
	z-index: 2; /* You must apply a z-index bigger than the original z-index or else some parts of the outline will be behind other grid elements */
}
<div class="grid">
  <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"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Единственный недостаток, который я обнаружил, заключается в том, что последний элемент сетки делает четкое наложение контуров. Однако это происходит только тогда, когда элементы не полностью заполняют сетку.

0
Leonardo Baptista Lopes