Question

我正在尝试通过grid布局实现“自动调整”。但是不行。如何工作？

要求：当屏幕尺寸变小时，链接应包含在多列中。

这是我的html：

<div class="wrapper">
      <div class="container">
        <a href="#">Link1</a>
        <a href="#">Link2</a>
        <a href="#">Link3</a>
        <a href="#">Link4</a>
        <a href="#">Link5</a>
        <p>@copyright goes here</p>
      </div>
    </div>

css：

.wrapper{
  max-width: 480px;
  border: 1px solid green;
}

.container{
  border: 1px solid red;
  display: grid;
  grid-gap: 0 20px;
  grid-template-columns:  repeat(auto-fit, auto);
  justify-content: center;
  align-content: center;
}

a{
  border: 1px solid green;
}

p{
  border: 1px solid red;
  grid-column: span 5;
  text-align: center;
}

Live Demo

Answer 1

当屏幕尺寸变小时，您可以改用display flex来实现链接的环绕。

.container{
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

在添加display flex之后，将flex-wrap: wrap添加到您的.container类中，可以在屏幕尺寸较小时使链接自动换行。

尺寸变小时，网格“自动调整”不包裹元素

1 个答案: