我正在尝试使用 CSS 网格创建一个简单的棋盘游戏 UI。我认为这将是达到此目的的完美工具,但我无法达到预期的结果,即:
1 - 磁贴将自动调整大小,以便填充父级 2 - 瓷砖将保持 1:1 的纵横比 3 - 页面内容不应扩展到可见的浏览器窗口之外。
不幸的是,到目前为止我尝试过的每个解决方案要么导致溢出,要么当每个图块的宽度变得太大时页面水平延伸。
:root
{
--col_and_row_count: 10;
}
.main
{
display: grid;
grid-template-rows: 60px 1fr 60px;
gap: 1em;
height: 100vh;
}
.wrapper
{
display: grid;
grid-template-columns: 200px 1fr;
}
.board
{
display: flex;
align-items: center;
}
.tiles
{
margin: auto;
display: grid;
grid-template-columns: repeat(var(--col_and_row_count), 1fr);
gap: 12px;
aspect-ratio: 1;
}
.tiles > div
{
background: green;
}
<div class="main">
<div>
Some heading text goes here
</div>
<div class="wrapper">
<div>
The side bar goes here
</div>
<div class="board">
<div class="tiles">
<div data-tile-index="0"></div>
<div data-tile-index="1"></div>
<div data-tile-index="2"></div>
<div data-tile-index="3"></div>
<div data-tile-index="4"></div>
<div data-tile-index="5"></div>
<div data-tile-index="6"></div>
<div data-tile-index="7"></div>
<div data-tile-index="8"></div>
<div data-tile-index="9"></div>
<div data-tile-index="10"></div>
<div data-tile-index="11"></div>
<div data-tile-index="12"></div>
<div data-tile-index="13"></div>
<div data-tile-index="14"></div>
<div data-tile-index="15"></div>
<div data-tile-index="16"></div>
<div data-tile-index="17"></div>
<div data-tile-index="18"></div>
<div data-tile-index="19"></div>
<div data-tile-index="20"></div>
<div data-tile-index="21"></div>
<div data-tile-index="22"></div>
<div data-tile-index="23"></div>
<div data-tile-index="24"></div>
<div data-tile-index="25"></div>
<div data-tile-index="26"></div>
<div data-tile-index="27"></div>
<div data-tile-index="28"></div>
<div data-tile-index="29"></div>
<div data-tile-index="30"></div>
<div data-tile-index="31"></div>
<div data-tile-index="32"></div>
<div data-tile-index="33"></div>
<div data-tile-index="34"></div>
<div data-tile-index="35"></div>
<div data-tile-index="36"></div>
<div data-tile-index="37"></div>
<div data-tile-index="38"></div>
<div data-tile-index="39"></div>
<div data-tile-index="40"></div>
<div data-tile-index="41"></div>
<div data-tile-index="42"></div>
<div data-tile-index="43"></div>
<div data-tile-index="44"></div>
<div data-tile-index="45"></div>
<div data-tile-index="46"></div>
<div data-tile-index="47"></div>
<div data-tile-index="48"></div>
<div data-tile-index="49"></div>
<div data-tile-index="50"></div>
<div data-tile-index="51"></div>
<div data-tile-index="52"></div>
<div data-tile-index="53"></div>
<div data-tile-index="54"></div>
<div data-tile-index="55"></div>
<div data-tile-index="56"></div>
<div data-tile-index="57"></div>
<div data-tile-index="58"></div>
<div data-tile-index="59"></div>
<div data-tile-index="60"></div>
<div data-tile-index="61"></div>
<div data-tile-index="62"></div>
<div data-tile-index="63"></div>
<div data-tile-index="64"></div>
<div data-tile-index="65"></div>
<div data-tile-index="66"></div>
<div data-tile-index="67"></div>
<div data-tile-index="68"></div>
<div data-tile-index="69"></div>
<div data-tile-index="70"></div>
<div data-tile-index="71"></div>
<div data-tile-index="72"></div>
<div data-tile-index="73"></div>
<div data-tile-index="74"></div>
<div data-tile-index="75"></div>
<div data-tile-index="76"></div>
<div data-tile-index="77"></div>
<div data-tile-index="78"></div>
<div data-tile-index="79"></div>
<div data-tile-index="80"></div>
<div data-tile-index="81"></div>
<div data-tile-index="82"></div>
<div data-tile-index="83"></div>
<div data-tile-index="84"></div>
<div data-tile-index="85"></div>
<div data-tile-index="86"></div>
<div data-tile-index="87"></div>
<div data-tile-index="88"></div>
<div data-tile-index="89"></div>
<div data-tile-index="90"></div>
<div data-tile-index="91"></div>
<div data-tile-index="92"></div>
<div data-tile-index="93"></div>
<div data-tile-index="94"></div>
<div data-tile-index="95"></div>
<div data-tile-index="96"></div>
<div data-tile-index="97"></div>
<div data-tile-index="98"></div>
<div data-tile-index="99"></div>
</div>
</div>
</div>
<div>
This is the footer
</div>
</div>
您应该在
auto
函数中使用 1fr
而不是 repeat
以避免溢出。
grid-template-columns: repeat(var(--col_and_row_count), 1fr); ❌
到
grid-template-columns: repeat(var(--col_and_row_count), auto); ✅
看看这个
:root
{
--col_and_row_count: 10;
}
.main
{
display: grid;
grid-template-rows: 60px 1fr 60px;
gap: 1em;
height: 100vh;
}
.wrapper
{
display: grid;
grid-template-columns: 200px 1fr;
}
.board
{
display: flex;
align-items: center;
}
.tiles
{
display: grid;
grid-template-columns: repeat(var(--col_and_row_count), auto);
width: 100%;
height: 100%;
grid-gap: 5px;
grid-template-rows: auto;
grid-auto-flow: row;
align-items: stretch
}
.tiles > div
{
background: green;
aspect-ratio: 1;
}
<div class="main">
<div>
Some heading text goes here
</div>
<div class="wrapper">
<div>
The side bar goes here
</div>
<div class="board">
<div class="tiles">
<div data-tile-index="0"></div>
<div data-tile-index="1"></div>
<div data-tile-index="2"></div>
<div data-tile-index="3"></div>
<div data-tile-index="4"></div>
<div data-tile-index="5"></div>
<div data-tile-index="6"></div>
<div data-tile-index="7"></div>
<div data-tile-index="8"></div>
<div data-tile-index="9"></div>
<div data-tile-index="10"></div>
<div data-tile-index="11"></div>
<div data-tile-index="12"></div>
<div data-tile-index="13"></div>
<div data-tile-index="14"></div>
<div data-tile-index="15"></div>
<div data-tile-index="16"></div>
<div data-tile-index="17"></div>
<div data-tile-index="18"></div>
<div data-tile-index="19"></div>
<div data-tile-index="20"></div>
<div data-tile-index="21"></div>
<div data-tile-index="22"></div>
<div data-tile-index="23"></div>
<div data-tile-index="24"></div>
<div data-tile-index="25"></div>
<div data-tile-index="26"></div>
<div data-tile-index="27"></div>
<div data-tile-index="28"></div>
<div data-tile-index="29"></div>
<div data-tile-index="30"></div>
<div data-tile-index="31"></div>
<div data-tile-index="32"></div>
<div data-tile-index="33"></div>
<div data-tile-index="34"></div>
<div data-tile-index="35"></div>
<div data-tile-index="36"></div>
<div data-tile-index="37"></div>
<div data-tile-index="38"></div>
<div data-tile-index="39"></div>
<div data-tile-index="40"></div>
<div data-tile-index="41"></div>
<div data-tile-index="42"></div>
<div data-tile-index="43"></div>
<div data-tile-index="44"></div>
<div data-tile-index="45"></div>
<div data-tile-index="46"></div>
<div data-tile-index="47"></div>
<div data-tile-index="48"></div>
<div data-tile-index="49"></div>
<div data-tile-index="50"></div>
<div data-tile-index="51"></div>
<div data-tile-index="52"></div>
<div data-tile-index="53"></div>
<div data-tile-index="54"></div>
<div data-tile-index="55"></div>
<div data-tile-index="56"></div>
<div data-tile-index="57"></div>
<div data-tile-index="58"></div>
<div data-tile-index="59"></div>
<div data-tile-index="60"></div>
<div data-tile-index="61"></div>
<div data-tile-index="62"></div>
<div data-tile-index="63"></div>
<div data-tile-index="64"></div>
<div data-tile-index="65"></div>
<div data-tile-index="66"></div>
<div data-tile-index="67"></div>
<div data-tile-index="68"></div>
<div data-tile-index="69"></div>
<div data-tile-index="70"></div>
<div data-tile-index="71"></div>
<div data-tile-index="72"></div>
<div data-tile-index="73"></div>
<div data-tile-index="74"></div>
<div data-tile-index="75"></div>
<div data-tile-index="76"></div>
<div data-tile-index="77"></div>
<div data-tile-index="78"></div>
<div data-tile-index="79"></div>
<div data-tile-index="80"></div>
<div data-tile-index="81"></div>
<div data-tile-index="82"></div>
<div data-tile-index="83"></div>
<div data-tile-index="84"></div>
<div data-tile-index="85"></div>
<div data-tile-index="86"></div>
<div data-tile-index="87"></div>
<div data-tile-index="88"></div>
<div data-tile-index="89"></div>
<div data-tile-index="90"></div>
<div data-tile-index="91"></div>
<div data-tile-index="92"></div>
<div data-tile-index="93"></div>
<div data-tile-index="94"></div>
<div data-tile-index="95"></div>
<div data-tile-index="96"></div>
<div data-tile-index="97"></div>
<div data-tile-index="98"></div>
<div data-tile-index="99"></div>
</div>
</div>
</div>
<div>
This is the footer
</div>
</div>