英文:
How to make css grid responsive in small screen
问题
我试图使用CSS网格创建一个响应式的杂志风格的文章块，但在小屏幕上，如何使它们响应式？我希望在小屏幕上，div 1 将会是100%的宽度/块。div 2和3 将会是50%并且会在同一行内。div 4 将与 div 1 一样是100%。div 5和6 将会是50%并且会在同一行内，与 2和3 相同。
我该怎么做？
这是我的代码：
.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 10px;
}
.div {
background: teal;
padding: 12px;
}
.div:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
.div:nth-child(2) { grid-area: 1 / 3 / 2 / 4; }
.div:nth-child(3) { grid-area: 1 / 4 / 2 / 5; }
.div:nth-child(4) { grid-area: 2 / 1 / 3 / 2; }
.div:nth-child(5) { grid-area: 2 / 2 / 3 / 4; }
.div:nth-child(6) { grid-area: 2 / 4 / 3 / 5; }
<div class="parent">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
<div class="div">5</div>
<div class="div">6</div>
</div>
如果您想在小屏幕上实现所描述的布局，您可以使用媒体查询来调整CSS。以下是一个示例：
@media (max-width: 768px) {
.parent {
grid-template-columns: 100%;
grid-template-rows: auto auto;
}
.div:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
.div:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
.div:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
.div:nth-child(4) { grid-area: 3 / 1 / 4 / 2; }
.div:nth-child(5) { grid-area: 4 / 1 / 5 / 2; }
.div:nth-child(6) { grid-area: 4 / 2 / 5 / 3; }
}
这将使您的布局在小屏幕上按照您所描述的方式呈现。
英文:
I am trying to create a responsive magazine style post-blocks using css grid. But In small screen, how can I make them responsive ? I want that, in small screen div 1 will be 100% width/block. Div 2 and 3 will be 50% and will be inline (in same line). Div 4 Will be 100% same as div 1 Div 5 and 6 will be 50% and will be inline, same as 2 and 3 (in same line).
How can I do it ?
Heres My Code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 10px;
}
.div{
background: teal;
padding: 12px;
}
.div:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
.div:nth-child(2) { grid-area: 1 / 3 / 2 / 4; }
.div:nth-child(3) { grid-area: 1 / 4 / 2 / 5; }
.div:nth-child(4) { grid-area: 2 / 1 / 3 / 2; }
.div:nth-child(5) { grid-area: 2 / 2 / 3 / 4; }
.div:nth-child(6) { grid-area: 2 / 4 / 3 / 5; }
<!-- language: lang-html -->
<div class="parent">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
<div class="div">5</div>
<div class="div">6</div>
</div>
<!-- end snippet -->
答案1
得分: 1
最简单的方法是使用媒体查询和@media来为不同的尺寸应用不同的样式。然后，不要使用grid-area来硬编码网格，而是应该使用span来为不同的分辨率应用不同的长度：
.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.div {
background: teal;
padding: 12px;
}
@media only screen
and (max-width: 719px) {
.div {
grid-column: span 2;
}
.div:nth-child(3n + 1) {
grid-column: span 4;
}
}
@media only screen
and (min-width: 720px) {
.div {
grid-column: span 1;
}
.div:nth-child(4n + 1) {
grid-column: span 2;
}
}
<div class="parent">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
<div class="div">5</div>
<div class="div">6</div>
</div>
英文:
The easiest way is to use media queries with @media to apply different styles for different sizes. Then instead of hardcoding the grid with grid-area you should simply use span to apply different length for resolutions:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.div {
background: teal;
padding: 12px;
}
@media only screen
and (max-width: 719px) {
.div {
grid-column: span 2;
}
.div:nth-child(3n + 1) {
grid-column: span 4;
}
}
@media only screen
and (min-width: 720px) {
.div {
grid-column: span 1;
}
.div:nth-child(4n + 1) {
grid-column: span 2;
}
}
<!-- language: lang-html -->
<div class="parent">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
<div class="div">5</div>
<div class="div">6</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论