Нужны предложения по дизайну CSS Grid - PullRequest
Новая
       8

Нужны предложения по дизайну CSS Grid

0 голосов
/ 12 декабря 2018

Произошло некоторое изменение дизайна для следующего кода HTML.Мне нужно иметь подобный интерфейс в CSS дизайн сетки.

Любые предложения приветствуются

<h3><Span style= 'color:red;'>***Remember SAIL while Reading email ***</Span></h3>
        <table style="border: 1px solid;">
            <tr>
                <td style="border: 1px solid black;"><span style='color:red;'>S</span>ender</td>
                <td style="border: 1px solid black;">sender of the email is  and friendly name is</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;" colspan="2">sample text</td>
            </tr>
        </table>

Как вышеуказанный код можно изменить на CSS3 сетку.

1 Ответ

0 голосов
/ 12 декабря 2018

Вы можете создать свою таблицу следующим образом.надеюсь, что это будет полезно. 

.grid-container{
	border: 1px solid #000;
    padding: 2px;
    margin-top: 30px;
}
.grid-row {
  display: grid;
  margin-bottom: 2px;
}
.grid-row:last-child{
  margin-bottom: 0px;
}
.grid-container .col-2-8{
	grid-template-columns: 20% 80%;
}
.grid-container .col-10{
	grid-template-columns: 100%;
}
.grid-item {
  border: 1px solid rgba(0, 0, 0, 0.8);
  margin-right: 2px;
  padding: 2px;
}
.grid-item:last-child{
margin-right: 0px;
}
<h3><Span style= 'color:red;'>***Remember SAIL while Reading email ***</Span></h3>
  <div class="grid-container">
    <div class="grid-row col-2-8">
      <div class="grid-item"><span style='color:red;'>S</span>ender</div>
      <div class="grid-item">sender of the email is and friendly name is</div>
    </div>
    <div class="grid-row col-10">
      <div class="grid-item">sample text</div>
    </div>
  </div>
...