html - CSS网格:水平两列,但垂直翻转
问题描述
我用
gridTemplateColumns: `repeat(auto-fill, minmax(250px, 1fr))`,
得到两列,如果它们的宽度小于 250px,我得到布局:
[1] [2]
如果宽度小于 250,我得到布局:
[1]
[2]
我想知道是否可以翻转垂直布局:
[2]
[1]
同时保持水平,如第一所述[1] [2]
。
解决方案
对于这种只有两个网格项的特殊情况,您可以通过在网格容器中镜像垂直方向并在网格项中反转镜像效果来破解它- 请参见下面的演示:
.wrapper {
display: grid;
grid-auto-rows: 100px; /* set a row height for illustration */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
transform: scaleY(-1); /* mirror vertically */
}
.wrapper > div {
background: aliceblue;
border: 1px solid cadetblue;
display: flex;
align-items: center;
justify-content: center;
transform: scaleY(-1); /* straighten the grid item */
}
<div class="wrapper">
<div>1</div>
<div>2</div>
</div>
推荐阅读
- python - 用于获取 TFLite 模型的均值和标准差的 API
- python - 在 Python 中合并两个数据框
- java - Android:PDF从webview下载为空
- java - 从文本文件中删除完全匹配的字符串
- sql-server - 如何一次性检查我的所有 SQL Server 存储过程是否已加密?
- laravel - Laravel 搜索查询优化
- c - 如何将用户输入限制为仅数字?
- arduino - Arduino:(char)Serial.read() 返回为⸮(反问号)
- python - How to get an input after a with open?
- python - Python, Pandas, sql, read specific columns from a database with a for-loop