需要有关 CSS 网格设计的建议答案

【问题标题】：Needs suggestions on CSS Grid design需要有关 CSS 网格设计的建议
【发布时间】：2018-12-12 02:34:48
【问题描述】：

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

【问题讨论】：

嗨，欢迎来到 StackOverflow！这里真的不是问这种问题的地方。 StackOverflow 是针对有关代码问题的问题。你能做的最好的事情就是谷歌一下，看看你是否能在 CSS 网格上找到一些资源。例如，您可以查看MDN reference。如果您稍后对此有任何问题，请返回此处，我们将尝试解决这些问题。供日后参考，请参阅How to Ask。

标签： css grid css-grid

【解决方案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>

【讨论】：