使用网格列和网格行的网格布局

Question

我正在使用网格的行和列。我在最后一个问题上遇到了问题。我需要第二行的高度和宽度相等。所以我尝试了下面的代码。

预期输出为

我正在获取输出

.content {
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: minmax(150px, auto);
  grid-gap: 10px;
}

.content div {
  background-color: #333;
  padding: 30px;
  color: #fff;
}

.one {
  grid-column: 1/4;
  grid-row: 1/3
}

.two {
  grid-column: 4/6;
  grid-row: 1/3;
}

.three {
  grid-column: 1/3;
  grid-row: 3/5
}

.four {
  grid-column: 3/5;
  grid-row: 3/5;
}

.five {
  grid-column: 5/6;
  grid-row: 3/5;
}

<div class="content">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
  <div class="five">5</div>
</div>

Answer 1

您使用的数字Dim con = new SqlConnection("Server=localhost;Database=master;User Id=sa;Password=whatever;") Dim sqlCmd = new SqlCommand() With sqlCmd .Connection = con .CommandType = CommandType.Text .CommandText = "Select * from spt_monitor" End With Dim sqlDataAdap = new SqlDataAdapter(sqlCmd) Dim dtRecord = new DataTable() sqlDataAdap.Fill(dtRecord) Dim dgv = new System.Windows.Forms.DataGridView() With dgv .DataSource = dtRecord .Dock = System.Windows.Forms.DockStyle.Fill End With AddHandler dgv.DataBindingComplete, Sub(sender, e) '' access the columns in the DataBindingComplete event dgv.Columns("connections").ReadOnly = True dgv.Columns(2).ReadOnly = True End Sub Dim f = new System.Windows.Forms.Form() f.Controls.Add(dgv) f.ShowDialog() 很难除以5。例如，使用3，您可以轻松地将其除以15，对于第一行，您将拥有3而不是9 + 6

3 + 2

.content {
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(15, 1fr);
  grid-auto-rows: minmax(150px, auto);
  grid-gap: 10px;
}

.content div {
  background-color: #333;
  padding: 30px;
  color: #fff;
}

.one {
  grid-column: 1/10;
  grid-row: 1/3
}

.two {
  grid-column: 10/16;
  grid-row: 1/3;
}

.three {
  grid-column: 1/6;
  grid-row: 3/5
}

.four {
  grid-column: 6/11;
  grid-row: 3/5;
}

.five {
  grid-column: 11/16;
  grid-row: 3/5;
}

更新

根据OP注释，这是所需的正确输出：

<div class="content">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
  <div class="five">5</div>
</div>

.content {
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(150px, auto);
  grid-gap: 10px;
}

.content div {
  background-color: #333;
  padding: 30px;
  color: #fff;
}

.one {
  grid-column: 1/3;
  grid-row: 1/3
}

.two {
  grid-column: 3/4;
  grid-row: 1/3;
}

.three {
  grid-column: 1/2;
  grid-row: 3/5
}

.four {
  grid-column: 2/3;
  grid-row: 3/5;
}

.five {
  grid-column: 3/4;
  grid-row: 3/5;
}