在 CSS Grid 中居中正方形
[英]Centering squares in CSS Grid
问题描述
我正在尝试创建四个以正方形模式显示的均匀间隔的正方形（两个在顶部，两个在底部），并以页面为中心，就像这样：
我曾尝试在 css 网格中执行此操作，但是当网格fr变得太大时，div 会保留在fr的右侧并将两列间隔得更远，无论浏览器宽度如何，如下所示：
我想将爱达荷州和内华达州的 div 移到fr的右侧，以便所有四个 div 相距相同的距离。
到目前为止，这是我的代码：谢谢！
.grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-gap: 20px; } .idaho { grid-column: 2/3; grid-row: 1/2; height: 300px; width: 300px; background-color: gray; } .utah { grid-column: 3/4; grid-row: 1/2; height: 300px; width: 300px; background-color: gray; } .nevada { grid-column: 2/3; grid-row: 2/3; height: 300px; width: 300px; background-color: gray; } .arizona { grid-column: 3/4; grid-row: 2/3; height: 300px; width: 300px; background-color: gray; }
<div class="grid"> <div class="idaho"> <h2>Idaho</h2> </div> <div class="utah"> <h2>Utah</h2> </div> <div class="nevada"> <h2>Nevada</h2> </div> <div class="arizona"> <h2>Arizona</h2> </div> </div>
2 个解决方案
解决方案1
1 已采纳 2020-03-27 15:46:00
grid-template-columns
取而代之的是：
grid-template-columns: 1fr 1fr 1fr 1fr
用这个：
grid-template-columns: 1fr auto auto 1fr
.grid { display: grid; grid-template-columns: 1fr auto auto 1fr; grid-template-rows: 1fr 1fr; grid-gap: 20px; } .idaho { grid-column: 2/3; grid-row: 1/2; height: 300px; width: 300px; background-color: gray; } .utah { grid-column: 3/4; grid-row: 1/2; height: 300px; width: 300px; background-color: gray; } .nevada { grid-column: 2/3; grid-row: 2/3; height: 300px; width: 300px; background-color: gray; } .arizona { grid-column: 3/4; grid-row: 2/3; height: 300px; width: 300px; background-color: gray; }
<div class="grid"> <div class="idaho"> <h2>Idaho</h2> </div> <div class="utah"> <h2>Utah</h2> </div> <div class="nevada"> <h2>Nevada</h2> </div> <div class="arizona"> <h2>Arizona</h2> </div> </div>
当您将四列设置为1fr ，您将在所有列之间平均分配容器空间。 当您加宽屏幕时，列将按等比例扩展，从而创建比正方形大小更宽的列。
当您将内部列设置为auto ，它们的大小将调整为内容宽度。 然后您可以在外列上使用1fr从相反方向消耗所有可用空间，始终将内列固定到中心。
justify-self: end
您还可以保留原始的grid-template-columns并添加justify-self: end到左侧方块以使它们在列内向右移动。
.grid { display: grid; grid-template-columns: 1fr auto auto 1fr; grid-template-rows: 1fr 1fr; grid-gap: 20px; } .idaho { grid-column: 2/3; grid-row: 1/2; height: 300px; width: 300px; background-color: gray; justify-self: end; /* new */ } .utah { grid-column: 3/4; grid-row: 1/2; height: 300px; width: 300px; background-color: gray; } .nevada { grid-column: 2/3; grid-row: 2/3; height: 300px; width: 300px; background-color: gray; justify-self: end; /* new */ } .arizona { grid-column: 3/4; grid-row: 2/3; height: 300px; width: 300px; background-color: gray; }
<div class="grid"> <div class="idaho"> <h2>Idaho</h2> </div> <div class="utah"> <h2>Utah</h2> </div> <div class="nevada"> <h2>Nevada</h2> </div> <div class="arizona"> <h2>Arizona</h2> </div> </div>
有关justify-self更多信息，请参阅：
解决方案2
0 2020-03-27 16:08:06
将 flexbox 用于这种事情。 使它容易很多。
.container{ display:flex; justify-content:space-evenly; height:100vh; } .left,.right{ display:flex; flex-direction:column; justify-content:space-evenly; } .box{ height:200px; width:300px; border:solid 1px black; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example 2</title> <link rel="stylesheet" type="text/css" href="styles/example2.css" /> </head> <body> <div class="container"> <div class='left'> <div class="box"> <h2>Idaho</h2> </div> <div class="box"> <h2>Nevada</h2> </div> </div> <div class='right'> <div class="box"> <h2>Utah</h2> </div> <div class="box"> <h2>Arizona</h2> </div> </div> </div> </body> </html>
.grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-gap: 20px; } .idaho { grid-column: 2/3; grid-row: 1/2; height: 300px; width: 300px; background-color: gray; } .utah { grid-column: 3/4; grid-row: 1/2; height: 300px; width: 300px; background-color: gray; } .nevada { grid-column: 2/3; grid-row: 2/3; height: 300px; width: 300px; background-color: gray; } .arizona { grid-column: 3/4; grid-row: 2/3; height: 300px; width: 300px; background-color: gray; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example 2</title> <link rel="stylesheet" type="text/css" href="styles/example2.css" /> </head> <body> <div class="grid"> <div class="idaho"> <h2>Idaho</h2> </div> <div class="utah"> <h2>Utah</h2> </div> <div class="nevada"> <h2>Nevada</h2> </div> <div class="arizona"> <h2>Arizona</h2> </div> </div> </body> </html>
CSS网格内容居中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.