css网格

最新推荐文章于 2024-05-29 21:23:05 发布

码林鼠

最新推荐文章于 2024-05-29 21:23:05 发布

阅读量71

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_41254345/article/details/104808894

版权

css 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

一

在这里插入图片描述

  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
<style lang="scss">
.box {
  height: 300px;
  width: 300px;
  border: 1px solid #000;
  display:grid;
  // grid-template-rows: 100px auto 25%;//Auto是剩余空间
  // grid-template-columns: 100px 100px 100px;
  // grid-template-rows:1fr 1fr 1fr;
  // grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows:repeat(3,1fr);
  grid-template-columns: repeat(3,1fr);
}
.box div{
  border:1px solid red;
}

二

在这里插入图片描述

<template>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</template>
<script>
export default {};
</script>
<style lang="scss">
.box {
  height: 300px;
  width: 300px;
  border: 1px solid #000;
  display:grid;
  grid-template-areas: 
  "a1 a1 a2"
  "a3 a3 a2"
  "a3 a3 a4";
}
.box div{
  border:1px solid red;
}
div:nth-of-type(1){
  grid-area: a1;
}
div:nth-of-type(2){
  grid-area: a2;
}
div:nth-of-type(3){
  grid-area: a3;
}
div:nth-of-type(4){
  grid-area: a4;
}
</style>

三

在这里插入图片描述

  <div class="box">
    <div></div>
  </div>
<style lang="scss">
.box {
  height: 300px;
  width: 300px;
  border: 1px solid #000;
  display:grid;
  grid-template-rows:repeat(3,1fr);
  grid-template-columns: repeat(3,1fr);
}
.box div{
  background:red;
  // grid-column-start: 2;
  // grid-column-end:4;
  // grid-row-start:2;
  // grid-row-end:4;
  // grid-column: 2/4;
  // grid-row:1/ span 3;
  grid-area:1/2/3/4;//上左下右
}
</style>