grid布局中对网格元素的命名和运用【2021.11.15】

最新推荐文章于 2024-04-12 19:35:58 发布

轻盈的风

最新推荐文章于 2024-04-12 19:35:58 发布

阅读量872

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/masierty/article/details/121363315

版权

首先是对网格元素的命名，使用的是grid-area属性，这个属性除了能命名，也能指定网格元素在网格容器中的大小和位置（grid-row-start,grid-column-start,grid-row-end,grid-column-end的缩写）。这次的主题是对网格元素命名和运用，grid-area的另一个作用就不过多阐述l。

命名：

.item1 { grid-area: header; }

调用的话通过容器属性的grid-template-areas属性来调用

比如我们让header占据第一排跨越5列

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style>
.item1 { grid-area: header; }
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-template-areas:
    'header header header header header';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container  div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="">span</div>
  <div class="">span</div>  
  <div class="">span</div>
  <div class="">span</div>
  <div class="">span</div>
  <div class="">span</div>
  <div class="">span</div>
  <div class="">span</div>
  <div class="">span</div>
  <div class="">span</div>
</div>

</body>
</html>

效果如下：

也可以对已命名元素定义多行空间，每行要写在单引号''内，以空格分隔，.表示没有名称的网格元素。

那么现在我们来试试利用grid-template-areas属性实现定义header占据两行跨域三列:

grid-template-areas:
    'header header header . .'
    'header header header . .'
    ;

效果图：

是不是一目了然

甚至我们还能随意控制排列顺序以及大小

 grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';