grid网格布局，利用place-content属性调整子元素整体对齐

发布于2023年07月08日作者：苏南大叔来源：程序如此灵动~

我们相信：世界是美好的，你是我也是。来玩一下解压小游戏吧！

本文描述如何调整子元素的整体布局，这句话有些绕口，可以把grid布局内的所有子元素看成一个整体，而不是单独的个体。然后使用justify-content和align-content（合称为place-content）来调整这一整体的布局。

苏南大叔：grid网格布局，利用place-content属性调整子元素整体对齐 - place-content — grid网格布局，利用place-content属性调整子元素整体对齐（图10-1）

大家好，这里是苏南的大叔的技术代码博客。随便写写，如果您觉得有用，欢迎转发打赏点赞。本文写grid网格布局中的justify-content和align-content（合称为place-content）的属性的使用方法。测试环境：win10、chrome。

基本前提

本文成立的重要前提就是：父容器的尺寸大于子元素的整体尺寸，这在grid布局中可是不常见的。在以前的文章里面，网格都是尽量去占据所有父元素的尺寸的。但是，本文却反其道而为之。

主要的布局结构如下：

<style>
  ul {
    width: 220px;
    height: 160px;
    border: 1px solid gray;
    list-style: none;
    margin:0px;
    padding: 0px;
    display: grid;
    grid-template-rows: repeat(2, 50px);
    grid-template-columns: repeat(2, 50px);
    gap: 10px 10px;
  }
  li {
    background-color: rgb(255, 187, 0);;
    color: white;
    text-align: center;
    line-height: 50px;
    font-size: 14px;
  }
</style>
<ul>
  <li>苏</li>
  <li>南</li>
  <li>大</li>
  <li>叔</li>
</ul>

这个例子的主体结构是用ul和li搭建的，所以会设置list-style: none/margin:0px/padding:0px等字样。

这个例子里面，注意看网格的总大小和父元素的总大小。

苏南大叔：grid网格布局，利用place-content属性调整子元素整体对齐 - 基本结构 — grid网格布局，利用place-content属性调整子元素整体对齐（图10-2）

水平对齐`justify-content`

注意：操作的是子元素整体，取值变化见代码。

<style>
  ul {
    width: 220px;
    height: 160px;
    border: 1px solid gray;
    list-style: none;
    margin:0px;
    padding: 0px;
    display: grid;
    grid-template-rows: repeat(2, 50px);
    grid-template-columns: repeat(2, 50px);
    gap: 10px 10px;
    margin-bottom: 3px;
  }
  li {
    background-color: blue;
    color: white;
    text-align: center;
    line-height: 50px;
    font-size: 14px;
  }
  li:nth-child(even) { background-color: rgb(0, 47, 255); }
  li:nth-child(odd) { background-color: #ffbc05; }
  #b1{justify-content: start;}
  #b2{justify-content: center;}
  #b3{justify-content: end;}
  #b4{justify-content: stretch;}
  #b5{justify-content: space-around;}
  #b6{justify-content: space-evenly;}
  #b7{justify-content: space-between;}
</style>
<ul id="b1"><li>start</li><li>苏</li><li>南</li><li>叔</li></ul>
<ul id="b2"><li>center</li><li>苏</li><li>南</li><li>叔</li></ul>
<ul id="b3"><li>end</li><li>苏</li><li>南</li><li>叔</li></ul>
<ul id="b4"><li>stretch</li><li>苏</li><li>南</li><li>叔</li></ul>
<ul id="b5"><li>around</li><li>苏</li><li>南</li><li>叔</li></ul>
<ul id="b6"><li>evenly</li><li>苏</li><li>南</li><li>叔</li></ul>
<ul id="b7"><li>between</li><li>苏</li><li>南</li><li>叔</li></ul>

苏南大叔：grid网格布局，利用place-content属性调整子元素整体对齐 - 水平对齐1 — grid网格布局，利用place-content属性调整子元素整体对齐（图10-3）

苏南大叔：grid网格布局，利用place-content属性调整子元素整体对齐 - 水平对齐2 — grid网格布局，利用place-content属性调整子元素整体对齐（图10-4）

竖直对齐`align-content`

注意：操作的是子元素整体，取值变化见代码。

<style>
  ul {
    width: 220px;
    height: 160px;
    border: 1px solid gray;
    list-style: none;
    margin:0px;
    padding: 0px;
    display: grid;
    grid-template-rows: repeat(2, 50px);
    grid-template-columns: repeat(2, 50px);
    gap: 10px 10px;
    margin-bottom: 3px;
  }
  li {
    background-color: red;
    color: white;
    text-align: center;
    line-height: 50px;
    font-size: 14px;
  }
  li:nth-child(even) { background-color: rgb(0, 47, 255); }
  li:nth-child(odd) { background-color: #ffbc05; }
  #b1{align-content: start;}
  #b2{align-content: center;}
  #b3{align-content: end;}
  #b4{align-content: stretch;}
  #b5{align-content: space-around;}
  #b6{align-content: space-evenly;}
  #b7{align-content: space-between;}
</style>
<ul id="b1"><li>start</li><li>苏</li><li>南</li><li>叔</li></ul>
<ul id="b2"><li>center</li><li>苏</li><li>南</li><li>叔</li></ul>
<ul id="b3"><li>end</li><li>苏</li><li>南</li><li>叔</li></ul>
<ul id="b4"><li>stretch</li><li>苏</li><li>南</li><li>叔</li></ul>
<ul id="b5"><li>around</li><li>苏</li><li>南</li><li>叔</li></ul>
<ul id="b6"><li>evenly</li><li>苏</li><li>南</li><li>叔</li></ul>
<ul id="b7"><li>between</li><li>苏</li><li>南</li><li>叔</li></ul>

苏南大叔：grid网格布局，利用place-content属性调整子元素整体对齐 - 竖直对齐1 — grid网格布局，利用place-content属性调整子元素整体对齐（图10-5）

苏南大叔：grid网格布局，利用place-content属性调整子元素整体对齐 - 竖直对齐2 — grid网格布局，利用place-content属性调整子元素整体对齐（图10-6）

合并对齐`place-content`

和前几篇文章里面写的一样，这里的place-content就等于竖直对齐align-content加上水平对齐justify-content。

<style>
  ul {
    width: 220px;
    height: 160px;
    border: 1px solid gray;
    list-style: none;
    margin:0px;
    padding: 0px;
    display: grid;
    grid-template-rows: repeat(2, 50px);
    grid-template-columns: repeat(2, 50px);
    gap: 10px 10px;
    margin-bottom: 3px;
  }
  li {
    background-color: red;
    color: white;
    text-align: center;
    line-height: 50px;
    font-size: 14px;
  }
  li:nth-child(even) { background-color: rgb(0, 47, 255); }
  li:nth-child(odd) { background-color: #ffbc05; }
  #b1{place-content: start center;}
  #b2{place-content: center end ;}
  #b3{place-content: end stretch;}
  #b4{place-content: stretch space-around;}
  #b5{place-content: space-around space-evenly;}
  #b6{place-content: space-evenly space-between;}
  #b7{place-content: space-between start;}
</style>
<ul id="b1"><li>start</li><li>center</li><li>南</li><li>叔</li></ul>
<ul id="b2"><li>center</li><li>end</li><li>南</li><li>叔</li></ul>
<ul id="b3"><li>end</li><li>stretch</li><li>南</li><li>叔</li></ul>
<ul id="b4"><li>stretch</li><li>around</li><li>南</li><li>叔</li></ul>
<ul id="b5"><li>around</li><li>evenly</li><li>南</li><li>叔</li></ul>
<ul id="b6"><li>evenly</li><li>between</li><li>南</li><li>叔</li></ul>
<ul id="b7"><li>between</li><li>start</li><li>南</li><li>叔</li></ul>

苏南大叔：grid网格布局，利用place-content属性调整子元素整体对齐 - 混合1 — grid网格布局，利用place-content属性调整子元素整体对齐（图10-7）

苏南大叔：grid网格布局，利用place-content属性调整子元素整体对齐 - 混合2 — grid网格布局，利用place-content属性调整子元素整体对齐（图10-8）

place-content有两个值，如果只写一个的话，就默认顺直对齐和水平对齐都是这一个值。

<style>
  ul {
    width: 220px;
    height: 160px;
    border: 1px solid gray;
    list-style: none;
    margin:0px;
    padding: 0px;
    display: grid;
    grid-template-rows: repeat(2, 50px);
    grid-template-columns: repeat(2, 50px);
    gap: 10px 10px;
    margin-bottom: 3px;
  }
  li {
    background-color: red;
    color: white;
    text-align: center;
    line-height: 50px;
    font-size: 14px;
  }
  li:nth-child(even) { background-color: rgb(0, 47, 255); }
  li:nth-child(odd) { background-color: #ffbc05; }
  #b1{place-content: start;}
  #b2{place-content: center ;}
  #b3{place-content: end;}
  #b4{place-content: stretch;}
  #b5{place-content: space-around;}
  #b6{place-content: space-evenly;}
  #b7{place-content: space-between;}
</style>
<ul id="b1"><li>start</li><li>start</li><li>南</li><li>叔</li></ul>
<ul id="b2"><li>center</li><li>center</li><li>南</li><li>叔</li></ul>
<ul id="b3"><li>end</li><li>end</li><li>南</li><li>叔</li></ul>
<ul id="b4"><li>stretch</li><li>stretch</li><li>南</li><li>叔</li></ul>
<ul id="b5"><li>around</li><li>around</li><li>南</li><li>叔</li></ul>
<ul id="b6"><li>evenly</li><li>evenly</li><li>南</li><li>叔</li></ul>
<ul id="b7"><li>between</li><li>between</li><li>南</li><li>叔</li></ul>

苏南大叔：grid网格布局，利用place-content属性调整子元素整体对齐 - 混合3 — grid网格布局，利用place-content属性调整子元素整体对齐（图10-9）

苏南大叔：grid网格布局，利用place-content属性调整子元素整体对齐 - 混合4 — grid网格布局，利用place-content属性调整子元素整体对齐（图10-10）

总结

grid布局表现上和传统的table布局类似，用法上和flex弹性盒子类似。grid和flex的对齐方式和传统的css写法区别太大，需要重新理解。

https://newsn.net/tag/css/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。

本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

【福利】腾讯云最新爆款活动！1核2G云服务器首年50元！

【源码】本文代码片段及相关软件，请点此获取更多信息

【绝密】秘籍文章入口，仅传授于有缘之人 css

如何理解PurgeCSS对css代码的TreeShaking技术？
如何通过css自定义软连字符的符号？硬连字符无法改变
css连字符，如何控制连字符位置？如何理解软硬连字符？
页面文字折行，css如何控制英文排版换行的连字符？
页面文字折行，word-wrap和word-break的主要区别是什么？
css节点选择器，通过属性选取节点attr()和[attr='']对比

前一篇后一篇联系苏南打赏大叔【真香警告】本站同款服务器，赞助商腾讯云

	原创不易，转载请保留链接，谢绝镜像采集
	如果能解决您的困扰，那么想必定是极好的
	快来这里！大家都在这儿等你讨论这个问题

基本前提

水平对齐justify-content

竖直对齐align-content

合并对齐place-content

相关链接

总结

水平对齐`justify-content`

竖直对齐`align-content`

合并对齐`place-content`