我想使用带有响应式媒体查询的 css 网格制作布局,但我不知道如何制作
这里是移动视图 enter image description here
这里是桌面视图 enter image description here
对于桌面视图,我可以使用 grid-template-columns: repeat(5, 1fr);
如何使它在移动视图中看起来像?
我的 HTML 标记
<li className="invoice-list">
<h1>#{x.id}</h1>
<p>{x.paymentDue}</p>
<h1>{x.clientName}</h1>
<h1>${x.total}</h1>
<button>{x.status}</button>
</li>
答案 0 :(得分:0)
在这种情况下使用 flexbox 可能更有意义。桌面版使用 flex-flow: row;
,移动版使用 flex-flow: column wrap;
。
body {
background: rgb(25, 25, 40);
padding: 3em;
}
.invoice-list {
background: rgb(40, 40, 70);
padding: 1em;
border-radius: 0.5em;
color: white;
font-family: sans-serif;
display: flex;
flex-flow: column wrap;
height: 7em;
}
.pending {
text-align: left;
color: orange;
background: rgba(255, 150, 0, 0.1);
border: none;
border-radius: 0.5em;
}
.pending::before {
content: "•";
margin-right: 1em;
}
.invoice-list > * {
display: block;
padding: 0.5em;
}
@media (min-width: 1000px) {
.invoice-list {
/* grid-template-columns: 1fr 1fr 1fr 2fr 1fr 1fr; */
flex-flow: row;
height: 3em;
}
.invoice-list > * {
align-self: right;
flex-basis: 100%;
}
}
<div class="invoice-list">
<b>#PC4066</b>
<span>Due 28 Jul 2021</span>
<b>$130.00</b>
<b>John</b>
<button class="pending">Pending</button>
</div>
答案 1 :(得分:-1)
我会混合使用 css-grid
和 flexbox
您使用 css-grid
创建两行两列。
然后使用 flexbox
,您可以justify-content:flex-start;
表示第一列中的内容,justify-content:flex-end;
表示第二列中的项目。
有很多在线小游戏可以学习flexbox
,如果您还不熟悉的话!
这是一个简单的例子:
.invoice-list {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-template-areas: "tl tr" "bl br";
}
.id {
grid-area: "tl";
display: flex;
justify-content: flex-start;
}
.paymentDue {
grid-area: "tr";
display: flex;
justify-content: flex-end;
}
.bottom-left{
grid-area: "bl";
display: flex;
flex-direction:column;
}
.button{
grid-area: "br";
display: flex;
justify-content: flex-end;
align-items:flex-end;
}
<li class="invoice-list">
<h1 class="id">#{x.id}</h1>
<p class="paymentDue">{x.paymentDue}</p>
<div class="bottom-left">
<h1>{x.clientName}</h1>
<h1>${x.total}</h1>
</div>
<div class="button">
<button>
{x.status}
</button>
</div>
</li>