CSS之gap属性

执行上下文

发布于 2022-07-26 15:11:29

2.4K0

发布于 2022-07-26 15:11:29

文章被收录于专栏：执行上下文执行上下文

Gap属性

gap 属性是用来设置网格行与列之间的间隙，该属性是row-gap and column-gap的简写形式

属性值

1、row-gap

设置网格布局中行之间的间隙大小

2、column-gap

设置网格布局中列之间的间隙大小

语法

gap: row-gap column-gap;

应用场景

在我们设置网格之间的间距的时候，一般用margin 或者 padding来设置元素之间的间距，但是我们在最后的时候可能不需要间距，那就需要单独为他设置一个为0的值来抵消。

实际代码

HTML

<div class="grid-container">
  <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>

CSS

<style> 
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 50px;
  border: 1px solid red;
}
.grid-container > div {
  border: 1px solid black;
  background-color: green;
  text-align: center;
  padding: 10px;
  color: #fff;
}
</style>