grid布局要点

通过grid-template-columns和grid-template-rows设置布局的列数和行业
单位fr设置比例,也可以用和px混用但总大小要先减掉px后才能算比例.也可以使用百分号和auto
使用重复函数repeat可方便的设置多列
使用auto-fill可以实现自动填充,能达到媒体查询效果
12列栅格布局
该种布局方式其实是把一个页面划分成12列,然后通过合并使每行显示不同的列数来实现布局的
使用做好的12列栅格布局的CSS做一个网页
CSS代码
```CSS

{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
/ 整个页面设置成flex布局,并居中,这样整体效果好看些 /
/ display: flex;
justify-content: center;
align-items: center;
min-width: 100vw;
min-height: 100vh; /
}

.container {
/ 最外面的大容器设置成grid布局指定最小宽度 /
display: grid;
/ 设置gap网格间距 /
gap: 5px;
min-width: 1000px;
}
.container > .row {
/ 每行都设置成grid布局并设置成12份 /
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 5px;
min-height: 50px;
}
.row > .item {
/ 设置一下每一个项目的外观方便看出来 /
background-color: lightgreen;
padding: 10px;
border: 1px solid red;
border-radius: 8px;
}
/ 以下代码设置每列的合并情况，这里为了方便使用设置了十二种情况 /
.col6 {
grid-column: span 6;
}
.col4 {
grid-column: span 4;
}
.col3 {
grid-column: span 3;
}
.col2 {
grid-column: span 2;
}
.col1 {
grid-column: span 1;
}
.col7 {
grid-column-end: span 7;
}
.col8 {
grid-column: span 8;
}
.col9 {
grid-column: span 9;
}
.col10 {
grid-column: span 10;
}
.col11 {
grid-column: span 11;
}
.col12 {
grid-column: span 12;
}


------------
html代码
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=q, initial-scale=1.0" />
    <title>作业12列栅格布局做一个企业页面框架</title>
    <style>
      @import url(grid_12.css);
      .container > :nth-last-child(2) {
        min-height: 80vh;
      }
      .item {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="item col12 header">导航区</div>
      </div>
      <div class="row">
        <div class="item col2 left">左侧区</div>
        <div class="item col8 main">主内容区</div>
        <div class="item col2 right">右侧区</div>
      </div>
      <div class="row">
        <div class="item col12 footer">页脚区</div>
      </div>
    </div>
  </body>
</html>

预览效果

产品相册实例(grid布局综合应用)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  /* 去掉链接文本的下划线 */
  text-decoration: none;
  /* 修改颜色 */
  color: #555;
  /* 设置阴影效果 */
  text-shadow: 2px 2px 10x #555;
  /* 设置对齐方式 */
  align-content: center;
}
h1 {
  /* 取消标题 文本加粗 */
  font-weight: normal;
  color: white;
  text-align: center;
  /* 外边距20 */
  margin-top: 20px;
}
body {
  /* 整个body颜色改成lightseagreen */
  background-color: lightseagreen;
}
.container {
  /* 最大容器使用网格布局 */
  display: grid;
  /* 重点: 这里通过auto-fill自动填充实现媒体查询效果,后面的250  200px表示的是大小值 */
  grid-template-columns: repeat(auto-fill, 250px);
  grid-template-rows: repeat(auto-fill, 200px);
  place-content: space-evenly;
  /* 最小宽度和高度设置成100个视口高度 */
  min-width: 100vw;
  min-height: 100vh;
  /* padding: 50px; */
  /* 网络间距调整成30比较合适 */
  gap: 30px;
}
img {
  /* 此处的图片大小是指定的,因为产品原始图片大小不同,不固定下来显示不正常 */
  width: 230px;
  height: 180px;
  /* text-align: center; */
}
.container > .item {
  /* 网络项目中的内容使用flex布局做精细调整 */
  display: flex;
  /* flex布局流使用列的方式  不换行 */
  flex-flow: column nowrap;
  /* 项目加圆角 */
  border-radius: 10px;
  padding: 10px;
  background-color: #eee;
  /* 设置交叉轴和主轴对齐 */
  align-items: center;
  justify-self: center;
}
.item :last-child {
  /* 这里单独设置了一下文字描述的内边距因为不设置字会压到图片内容 */
  font-size: 20px;
  color: #000;
  padding: 10px;
}
.container > .item:hover {
  box-shadow: 2px 2px 2px #555;
  /* 设置鼠标经过交果，以下通过calc函数改变了宽度和高度 */
  width: calc(100% * 1.04);
  height: calc(100% * 1.04);
  background-color: lightcyan;
}

HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>产品图册实例</title>
    <!-- <link rel="stylesheet" href="/rt_css/style.css" /> -->
    <style>
      @import url(/rt_css/style.css);
    </style>
  </head>
  <body>
    <h1>产品图册</h1>
    <div class="container">
      <div class="item">
        <a href=""><img src="\网络相册素材\K1.jpg" alt="" /> </a
        ><a href="">商泰收款机</a>
      </div>
      <div class="item">
        <a href=""><img src="\网络相册素材\K2.jpg" alt="" /></a
        ><a href="">海信收款机</a>
      </div>
      <div class="item">
        <a href=""><img src="\网络相册素材\K3.jpg" alt="" /></a
        ><a href="">唯拓收款机</a>
      </div>
      <div class="item">
        <a href=""><img src="\网络相册素材\K4.jpg" alt="" /></a
        ><a href="">中崎</a>
      </div>
      <div class="item">
        <a href=""><img src="\网络相册素材\K5.jpg" alt="" /></a
        ><a href="">商宜</a>
      </div>
      <div class="item">
        <a href=""><img src="\网络相册素材\K6.jpg" alt="" /></a
        ><a href="">生意通</a>
      </div>
      <div class="item">
        <a href=""><img src="\网络相册素材\K7.png" alt="" /></a
        ><a href="">赢通</a>
      </div>
    </div>
  </body>
</html>

运行效果

小问题:使上用述代码做出的案便,当浏览器缩小为图片只能显示一列时,后面的图片和文字有变化,不知道代码是不是有问题,其它情况下代码工作都正常.请老师或同学指出一下,谢谢!!

变为一列时运行效果如下图:

批改状态：未批改

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

自己整一个练习flex做骰子做熟慢慢就理解flex布局

2020-09-16 21:59:35

grid布局要点

12列栅格布局

使用做好的12列栅格布局的CSS做一个网页

产品相册实例(grid布局综合应用)

小问题:使上用述代码做出的案便,当浏览器缩小为图片只能显示一列时,后面的图片和文字有变化,不知道代码是不是有问题,其它情况下代码工作都正常.请老师或同学指出一下,谢谢!!