grid布局中如何控制某个单元格的大小

最新推荐文章于 2023-05-20 11:29:50 发布

我是梦磊OL

最新推荐文章于 2023-05-20 11:29:50 发布

阅读量666

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/m0_68094390/article/details/130750500

版权

该文章展示了一个使用CSSGrid布局的例子，通过grid-template-columns属性来定义特定单元格的宽度，创建了一种九宫格样式，其中包括不同颜色的背景块以及一个头像位置，整个布局还设置了行高、行间距和列间距。

摘要由CSDN通过智能技术生成

可以使用grid-template-columns属性来修改特定单元格的宽度。

<template>
<div>
  <div class="wrapperhomebar">
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
    <div class="four">Four</div>
    <div class="five">Five</div>
    <div class="six">Six</div>
    <div class="seven">7</div>
    <div class="eight">8</div>
    <div class="nine">9</div>
<!--    列与列之间留够100px的空间-->
    <div></div>
    <div class="ten">10</div>
<!--    头像-->
    <div class="eleven">
      <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="50"></el-avatar>
    </div>

  </div>

</div>
</template>

<script>
export default {
  name: "homeBar"
}
</script>

<style scoped>
.wrapperhomebar {
  margin: 10px;
  /* 声明一个容器 */
  display: grid;
  /*  声明行的高度  */
  grid-template-rows: repeat(1, 50px);
  /*  声明行间距和列间距  */
  grid-gap: 15px;
  /*  声明列的宽度  */
  grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px 50px 100px 500px 50px;
}
.one {
  background: #19CAAD;
}
.two {
  background: #8CC7B5;
}
.three {
  background: #D1BA74;
}
.four {
  background: #BEE7E9;
}
.five {
  background: #E6CEAC;
}
.six {
  background: #ECAD9E;
}
.seven{
  background: #ECAD9E;
}
.eight{
  background: #ECAD9E;
}
.nine{
  background: #ECAD9E;
}
.ten{
  background-color: #E6CEAC;
}
.eleven{
  position: absolute;
  right: 618px;
  top: 10px;
  background-color: #E6CEAC;
}
.twelve{
  background-color: #E6CEAC;
}


</style>