我正在尝试创建一个响应的正方形网格.应调整方块大小以适合视口的宽度.更改视口的高度时,方块不应调整大小.
我得到了如何调整每个方块的宽度,但我不知道如何使元素方形以及如何在视口宽度变化时缩放它们的高度.
在下方小提琴的示例中,七个方格应始终水平放置,并且它们应按比例缩放.我不在乎可见的行数.
在这里小提琴http://jsfiddle.net/gonyhvz8/11/
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div> …我想创建一个响应方块的网格布局.
我觉得我应该能够使用CSS网格布局,但无法将每个方块的高度设置为等于宽度.
也难以在每个方格之间设置排水沟.
使用flexbox会更好吗？
目前我的HTML看起来像这样,但是会动态的,所以可以添加更多的正方形.当然,它需要具有响应性,因此最好使用媒体查询将其折叠为一列.
<div class="square-container">
<div class="square">
<div class="content">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
</div>
使用css网格,这是我得到的
.square-container{
display: grid;
grid-template-columns: 30% 30% 30%;
.square {
}
}
我能够进一步使用flexbox并且能够使用间隔来将正方形与一个漂亮的排水沟对齐,但仍然在努力使高度与每个正方形的宽度相匹配.
我无法找到任何与flexbox或网格相关的示例,但任何示例都将受到赞赏.
谢谢