如何使用网格创建布局

Question

我想创建最后一个元素居中的布局。我应该处理网格，但不能将最后一个元素居中

Desired view

.box {
  min-width: 50px;
  min-height:50px;
  background: red;
  margin: 5px;
}

.container {
   width: 200px;
   display: grid;
   grid-template-columns: auto auto auto;

}

.box7 {
    grid-column-start: 2;
    grid-row-start: 3;
    grid-column-end: 4;
}

<div class='container'>
  <div class='box'>1</div>
  <div class='box'>2</div>
  <div class='box'>3</div>
  <div class='box'>4</div>
  <div class='box'>5</div>
  <div class='box'>6</div>
  <div class='box box7'>7</div>
<div>

Desired view

Answer 1

.box {
  min-height: 50px;
  background: red;
  margin: 5px;
  grid-column: span 2;
}

.container {
   width: 200px;
   display: grid;
   grid-template-columns: repeat(6, 1fr);

}

.box7 {
   grid-column-start: 2;
   grid-column-end: 6;
}

<div class='container'>
  <div class='box'>1</div>
  <div class='box'>2</div>
  <div class='box'>3</div>
  <div class='box'>4</div>
  <div class='box'>5</div>
  <div class='box'>6</div>
  <div class='box box7'>7</div>
<div>

您还可以在

上找到多种方法

Answer 2

希望我的这个方法对你有所帮助：

.box {
  min-width: 50px;
  min-height:50px;
  background: red;
  margin: 5px;
}

.container {
   width: 200px;
   display: grid;  
   grid-template-rows: repeat(3, [row] auto  );
   grid-template-columns: repeat(3, [col] auto) ;
}

.subgrid {
 grid-column: col / span 3;
 grid-row: row 3;
}

.box7
{
width:66%;
margin-left:auto;
margin-right:auto;
}

<div class='container'>
  <div class='box'>1</div>
  <div class='box'>2</div>
  <div class='box'>3</div>
  <div class='box'>4</div>
  <div class='box'>5</div>
  <div class='box'>6</div>
  <div class="subgrid">
    <div class='box box7'>7</div>
  </div>
<div>

如何使用网格创建布局

How to create layout with grid

css

layout

sass

css-grid