任务一九宫格的布局是九个格子均匀分布于网页中间，三个格子横向排列占满屏幕，每个格子中间保留一定的边距。任务一九宫格的布局还不用到居中的方法。格子在屏幕中间均匀分布靠的是宽度，高度，以及边距的控制。可以设置三个盒子相同的尺寸，左右边距相同，总宽度等于父元素狂宽度。纵向也是同样道理。

兄弟，我问个问题？

.swag{

  padding-left:31%;

  padding-bottom: 31%;

  margin:1%;

  border-radius: 20%;

  background: orange;

  float:left;

}

你的padding-left在图片是21%，而你下面的代码padding-left:31%。我测试过你下面的代码，基本实现了自适应。

如果按照你截图的代码，我就解释下的原因，padding-left撑开了宽度，你设置了padding-left是21%，所以一个小盒子的宽度是21%。在加上你设置的margin,所以一行只能显示4个。（5个小盒子总宽度超过100%）。至于你想要居中的话，父容器设置text-align:center.

使用vw单位会有坑

  要注意每个格子所占的比例是否超出33%，特别是再父级存在font-size属性的情况下。为什么会出现33%超出的问题。

你的单个宽度为21%，父盒子宽度100%，  21% * 4 = 84%再加上外边距也达不到一行三个的宽度，修改一下方块宽度就好了

测试

你可以增加他的padding，调整到合适的大小，或者用vw单位，建议你给他一个固定的宽和高，调整一下值就行了注意3个盒子，要加上他们之间的距离刚好占满页面，这个值自己多调整一下就行。。

看了一下你的代码，

 padding-left:31%;

  padding-bottom: 31%;

，然后设置1%的magin，每个盒子都有1%的间距。实现自适应应该是没有问题的.但是你图片上面的padding-left:21%,padding-bottom:21%是什么鬼鬼？把21改成31%基本就没什么问题了.还有注意css的书写顺序.

任务一九宫格的布局还用不到居中的方法。格子在屏幕中间均匀分布靠的是宽度，高度，以及边距的控制。我当时宽度和高度用的都是30vw，你可以试试。

页面的整体宽度看作是100%，你现在的情况是因为设置了padding-left:21%,加上margin：1%，一格所占的宽度是23%，所以一行可以排列下4格，padding-left改为31%，这样每格的宽度就是33%，一行可以排列下三格。