CSS grid 布局

原创已于 2022-03-25 14:44:58 修改 · 727 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #vue.js #css3

于 2022-03-25 13:57:16 首次发布

CSS 专栏收录该内容

49 篇文章

订阅专栏

CSS grid 布局

.father{
    display: grid;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
    grid-gap: 10px 10px;
    grid-template-areas:    '1.2'
	                        '3.4'
	                        '5.6'
	                        '7.8'
	                        '9.10'
    ;
}

或者使用 repeat() 方法

    grid-template-rows: repeat(5, 20%);

GRID

定位子元素位置

子元素可以按次排列，或者可以指定位置：

.child {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

// 表示左侧第一个的位置
.area-left-1 {
        grid-row-start: 1; grid-row-end: 2;
        grid-column-start: 1;  grid-column-end: 2;
}

// 右侧第一个的位置
.area-right-1 {
        grid-row-start: 1; grid-row-end: 2;
        grid-column-start: 3;  grid-column-end: 4;
}

用 SCSS 生成子元素位置 class


@for $item from 1 through 5{
    .area-left-#{$item}{
        grid-row-start: $item; grid-row-end: $item + 1;
        grid-column-start: 1;  grid-column-end: 2;
    }
    .area-right-#{$item}{
        grid-row-start: $item; grid-row-end: $item+1;
        grid-column-start: 3;  grid-column-end: 4;
    }
}

生成

.area-left-1 {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 2;
}
.area-right-1 {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 3;
  grid-column-end: 4;
}
.area-left-2 {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 2;
}
.area-right-2 {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 3;
  grid-column-end: 4;
}
.area-left-3 {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 2;
}
.area-right-3 {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 3;
  grid-column-end: 4;
}
.area-left-4 {
  grid-row-start: 4;
  grid-row-end: 5;
  grid-column-start: 1;
  grid-column-end: 2;
}
.area-right-4 {
  grid-row-start: 4;
  grid-row-end: 5;
  grid-column-start: 3;
  grid-column-end: 4;
}
.area-left-5 {
  grid-row-start: 5;
  grid-row-end: 6;
  grid-column-start: 1;
  grid-column-end: 2;
}
.area-right-5 {
  grid-row-start: 5;
  grid-row-end: 6;
  grid-column-start: 3;
  grid-column-end: 4;
}