css - 需要有关 CSS 网格设计的建议

Question

以下 HTML 代码有一些设计更改。我需要在 CSS 网格设计中有类似的 UI。

欢迎任何建议

<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网格设计。

Answer 1

您可以通过以下方式创建表格。希望这会有用。

.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>