Блог

Главная - Вопросы по программированию - есть ли альтернатива для отображения: сетка, которая поддерживается для gmail и/или outlook?

есть ли альтернатива для отображения: сетка, которая поддерживается для gmail и/или outlook?

#html #css #gmail #css-grid #html-email

Вопрос:

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

существует ли такая альтернатива? а предложения, если нет?

для справки вот сетка, которую я сделал:

 <!DOCTYPE html>
<html>
<head>
<style>

.wrapper {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(30px, auto);
  
  
}
.one {
  grid-column: 1 / 16;
  grid-row: 1 / 9;
  background-color: black;
}
.two {
  grid-column: 16 / 21;
  grid-row: 1 / 9;
  background-color: red;
}
.three {
  grid-column: 1/7;
  grid-row: 9 / 12;
  background-color: green;
}
.four {
  grid-column: 15/21;
  grid-row: 9/12;
  background-color: blue;
}
.five {
  grid-column: 1/11;
  grid-row: 12/17;
  background-color: yellow;
}
.six {
  grid-column: 11/21;
  grid-row: 12/17;
  background-color: purple;
}
.seven {
  grid-column: 7/15;
  grid-row: 9/12;
  background-color: gray;
}


</style>
</head>
<body>

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
  <div class="seven">text</div>
</div>


</body>
</html>

Ответ №1:

Поддержка CSS или Head-Style довольно слабая для электронных писем с ~45%
цитирование: Поддержка CSS

Так что в целом вам следует включить ретрансляцию inline-style при разработке шаблона электронной почты.

Ни CSS-Grid (~59% поддерживается), ни Flexbox (~59% поддерживается) не имеют разумной поддержки со стороны почтовых клиентов.
цитирование: Поддержка CSS-сетки цитирование: Поддержка
Flexbox

Единственное, что вы можете сделать, это использовать <table> приложение, которое имеет надежную 100% поддержку, так как это HTML-решение. Это не табличные данные, но для шаблонов электронной почты приемлемо, так как это единственный метод, который полностью поддерживается!
цитирование: поддержка таблиц

Электронная почта-Шаблон:

Как было сказано выше, мы должны использовать таблицу. Эквивалентом grid-gap будет комбинация border-collapse: seperate; border-spacing: value; , непосредственно используемая на самой таблице: <table style="border-collapse: seperate; border-spacing: 10px;">

Чтобы подражать вашему grid-template-columns: repeat(20, 1fr); , я начал с пустого <tr> , который имеет 20x <td width="5%">

теперь это позволяет нам использовать colspan атрибут-для охвата нескольких столбцов точно так же, как grid-column: spanX

чтобы эмулировать минимальную высоту, вам просто нужно применить height атрибут -, который такой же, как min-height и для таблиц, так как размер ячейки таблицы изменится, если содержимое будет больше. Я просто увеличил ваши строки в 30 раз по сравнению с теми строками, которые вы хотели охватить.

Чтобы текст начинался в верхнем левом углу, а не в центре ячейки таблицы, вы должны применить: text-align:left; vertical-align:top; к каждому <td> из них .

 <table width="100%;" style="border-collapse: seperate; border-spacing: 10px;">
  <tr>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
  </tr>
  <tr height="240px">
    <td colspan="15" style="background-color:black; color:white; text-align:left; vertical-align:top;">one</td>
    <td colspan="5" style="background-color:red; text-align:left; vertical-align:top;">two</td>
  </tr>
  <tr height="90px">
    <td colspan="6" style="background-color:green; text-align:left; vertical-align:top;">three</td>
    <td colspan="8" style="background-color:gray; text-align:left; vertical-align:top;">text</td>
    <td colspan="6" style="background-color:blue; text-align:left; vertical-align:top;">four</td>
  </tr>
  <tr height="150px">
    <td colspan="10" style="background-color:yellow; text-align:left; vertical-align:top;">five</td>
    <td colspan="10" style="background-color:purple; text-align:left; vertical-align:top;">six</td>
  </tr>
</table>

Комментарии:

1. Это отличный эквивалент, но обратите внимание, как это выглядит на мобильных телефонах. Там может не хватить места, как только его раздавят: litmus.com/checklist/emails/public/ded6145

2. @Nathan да, но тогда то же самое правило применяется к истинной сетке, и это то, для чего у вас обычно есть медиа-запросы. То, что шаблон электронной почты должен быть минималистичным именно по этой причине, является концепцией. Как таковой, он подошел бы для сайта обзора, но не для фактического вопроса, который был задан.

Метки: ,