Непреднамеренные пробелы в CSS-сетке

Я пытаюсь подписаться на это сообщение в блоге Stripe:

https://stripe.com/blog/connect-front-end-experience

Хотя мой конечный продукт в целом выглядит так же, как в учебнике, в моем браузере есть непреднамеренные пробелы. Я не хочу называть их пробелами, поскольку пробел имеет особое значение в CSS-сетках, и моя ошибка больше похожа на ошибку рандомизированного округления.

Вот несколько картинок для сравнения. Safari обрабатывает сетку более элегантно, чем хром, но проблемы все равно остаются. Обратите внимание на пиксельные белые линии на фотографиях.

Полоса конечного продукта:

Непреднамеренные пробелы в CSS-сетке

Моя попытка в Safari:

Непреднамеренные пробелы в CSS-сетке

Моя попытка в Chrome:

Непреднамеренные пробелы в CSS-сетке

Вот код, который я использую:

.stripes {
  display: grid;
  grid: repeat(5, 200px) / repeat(10, 1fr);
  transform: skewY(-12deg);
  transform-origin: 0;
}

.stripes :nth-child(1) {
  grid-column: span 3;
}

.stripes :nth-child(2) {
  grid-area: 3 / span 3 / auto / -1;
}

.stripes :nth-child(3) {
  grid-row: 4;
  grid-column: span 5;
}

.blue {
  background: blue;
}

.red {
  background: red;
}

.special1 {
  background: linear-gradient(to bottom left, #1890ff, #42C6EB);
}

.special2{
  background: linear-gradient(to left, #1890ff, #42C6EB);
}

.special3{
  background: linear-gradient(to left, rgba(66,198,235, 0.9), rgba(66,198,235,0.2));
}

.topRow {
  background: linear-gradient(to top, rgb(52, 173, 242), #1890ff);
}

.secondRow {
  background: linear-gradient(to top, #42C6EB, rgb(52, 173, 242))
}

.thirdRow {
  background: #42C6EB
}

.fourthRow {
  background: linear-gradient(to top, rgba(66,198,235,0.8), #42C6EB)
  
}

.fifthRow {
  background: linear-gradient(to top, rgba(66,198,235,0.2), rgba(66,198,235,0.8))
}

<div class = "stripes">
  <div class = "special1"></div>
  <div class = "special2"></div>
  <div class = "special3"></div>
  <div class = "topRow"></div>
  <div class = "topRow"></div>
  <div class = "topRow"></div>
  <div class = "topRow"></div>
  <div class = "topRow"></div>
  <div class = "topRow"></div>
  <div class = "topRow"></div>
  <div class = "secondRow"></div>
  <div class = "secondRow"></div>
  <div class = "secondRow"></div>
  <div class = "secondRow"></div>
  <div class = "secondRow"></div>
  <div class = "secondRow"></div>
  <div class = "secondRow"></div>
  <div class = "secondRow"></div>
  <div class = "secondRow"></div>
  <div class = "secondRow"></div>
  <div class = "thirdRow"></div>
  <div class = "thirdRow"></div>
  <div class = "thirdRow"></div>
  <div class = "thirdRow"></div>
  <div class = "thirdRow"></div>
  <div class = "thirdRow"></div>
  <div class = "thirdRow"></div>
  <div class = "fourthRow"></div>
  <div class = "fourthRow"></div>
  <div class = "fourthRow"></div>
  <div class = "fourthRow"></div>
  <div class = "fourthRow"></div>
  <div class = "fifthRow"></div>
  <div class = "fifthRow"></div>
  <div class = "fifthRow"></div>
  <div class = "fifthRow"></div>
  <div class = "fifthRow"></div>
  <div class = "fifthRow"></div>
  <div class = "fifthRow"></div>
  <div class = "fifthRow"></div>
  <div class = "fifthRow"></div>
  <div class = "fifthRow"></div>
</div>

Поиграв немного, выяснилось, что проблема заключается в использовании linear-gradient. Когда я переключаюсь с градиента на сплошной цвет, вертикальные полосы исчезают, но не крошечные линии с псевдонимом, идущие вдоль диагональных полос. Любые идеи?

@ksav где вы видите встроенные блочные элементы? это о сетке CSS

— 26.10.2018 23:37

html css css-grid linear-gradients

26.10.2018 22:52

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

140

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Существует странное взаимодействие с div в HTML: если следующий div не начинается на той же строке, что и заканчивается предыдущий, он создает пробелы. Я нашел два исправления. Один из них - начинать каждый div на той же строке, что и конец предыдущего div. Другой - иметь комментарий между двумя div, например :

</div><!--
--><div>

Спасибо за предложение. К сожалению, когда я попробовал оба ваших решения, мне не удалось изменить свой результат. Вот код, показывающий другое предлагаемое исправление: codepen.io/anon/pen/pxGZMr

— 26.10.2018 23:27

не уверен, почему за вас проголосовали ... мы имеем дело с сеткой CSS, поэтому пробелов нет

— 26.10.2018 23:38

26.10.2018 23:01

Ответ принят как подходящий

Это проблема отображения субпикселей. К сожалению, нет тривиального и универсального исправления, поскольку каждый браузер обрабатывает вычисления по-разному, когда речь идет о значениях, меньших, чем 1px.

В вашем случае вы можете добавить фон ко всему контейнеру, чтобы избежать (или хотя бы минимизировать) этого эффекта:

.stripes {
  display: grid;
  grid: repeat(5, 200px) / repeat(10, 1fr);
  background:linear-gradient(to top,rgba(66, 198, 235, 0.2),#1890ff);
  transform: skewY(-12deg);
  transform-origin: 0;
}

.stripes :nth-child(1) {
  grid-column: span 3;
}

.stripes :nth-child(2) {
  grid-area: 3 / span 3 / auto / -1;
}

.stripes :nth-child(3) {
  grid-row: 4;
  grid-column: span 5;
}

.blue {
  background: blue;
}

.red {
  background: red;
}

.special1 {
  background: linear-gradient(to bottom left, #1890ff, #42C6EB);
}

.special2{
  background: linear-gradient(to left, #1890ff, #42C6EB);
}

.special3{
  background: linear-gradient(to left, rgba(66,198,235, 0.9), rgba(66,198,235,0.2));
}

.topRow {
  background: linear-gradient(to top, rgb(52, 173, 242), #1890ff);
}

.secondRow {
  background: linear-gradient(to top, #42C6EB, rgb(52, 173, 242))
}

.thirdRow {
  background: #42C6EB
}

.fourthRow {
  background: linear-gradient(to top, rgba(66,198,235,0.8), #42C6EB)
  
}

.fifthRow {
  background: linear-gradient(to top, rgba(66,198,235,0.2), rgba(66,198,235,0.8))
}

<div class = "stripes">
  <div class = "special1"></div>
  <div class = "special2"></div>
  <div class = "special3"></div>
  <div class = "topRow"></div>
  <div class = "topRow"></div>
  <div class = "topRow"></div>
  <div class = "topRow"></div>
  <div class = "topRow"></div>
  <div class = "topRow"></div>
  <div class = "topRow"></div>
  <div class = "secondRow"></div>
  <div class = "secondRow"></div>
  <div class = "secondRow"></div>
  <div class = "secondRow"></div>
  <div class = "secondRow"></div>
  <div class = "secondRow"></div>
  <div class = "secondRow"></div>
  <div class = "secondRow"></div>
  <div class = "secondRow"></div>
  <div class = "secondRow"></div>
  <div class = "thirdRow"></div>
  <div class = "thirdRow"></div>
  <div class = "thirdRow"></div>
  <div class = "thirdRow"></div>
  <div class = "thirdRow"></div>
  <div class = "thirdRow"></div>
  <div class = "thirdRow"></div>
  <div class = "fourthRow"></div>
  <div class = "fourthRow"></div>
  <div class = "fourthRow"></div>
  <div class = "fourthRow"></div>
  <div class = "fourthRow"></div>
  <div class = "fifthRow"></div>
  <div class = "fifthRow"></div>
  <div class = "fifthRow"></div>
  <div class = "fifthRow"></div>
  <div class = "fifthRow"></div>
  <div class = "fifthRow"></div>
  <div class = "fifthRow"></div>
  <div class = "fifthRow"></div>
  <div class = "fifthRow"></div>
  <div class = "fifthRow"></div>
</div>

Кстати, если вы хотите добиться только визуального эффекта, вы можете рассматривать несколько фонов внутри одного контейнера вместо всего этого кода:

.container {
   height:1000px;
   transform: skewY(-12deg);
   transform-origin:0;
   background:
     /*special 1*/
     linear-gradient(to bottom left, #1890ff, #42C6EB) 0 0/calc(3*100%/10) calc(100%/5),
     /*special 2*/
     linear-gradient(to left, #1890ff, #42C6EB) 100% calc(100%/2)/calc(3*100%/10) calc(100%/5),
     /*special 3*/
     linear-gradient(to left, rgba(66,198,235, 0.9), rgba(66,198,235,0.2)) 0 calc(3*100%/4)/50% calc(100%/5),
     /*Top row*/
     linear-gradient(to top, rgb(52, 173, 242), #1890ff) 0 0/100% calc(100%/5),
     /*second row*/
     linear-gradient(to top, #42C6EB, rgb(52, 173, 242)) 0 calc(100%/4)/100% calc(100%/5),
     /*third row*/
     linear-gradient(#42C6EB, #42C6EB) 0 calc(100%/2)/100% calc(100%/5),
     /*fourth row*/
     linear-gradient(to top, rgba(66,198,235,0.8), #42C6EB) 100% calc(3*100%/4)/50.1% calc(100%/5),
     /*fifth row*/
     linear-gradient(to top, rgba(66,198,235,0.2), rgba(66,198,235,0.8)) 0 100%/100% calc(100%/5);
   background-repeat:no-repeat;
}