jquery 使网格布局响应于在移动的设备上显示1列和2列

dly7yett 于 2023-06-22 发布在 jQuery

关注(0)|答案(1)|浏览(119)

注意：不重复，因为列和行的顺序与正常方式不同，特别是对于移动的设备

我正在尝试按以下顺序在移动的设备上显示此网格布局：
1.第一行：标题（1列使用全宽）
1.第二行：main（1列使用全宽）
1.第三行：aside（1列使用全宽）
1.第四行：警报和天气（2列，每列宽度为50%）
1.第五行：类别和大约（2列，每列使用50%宽度）
1.第六行：页脚（1列使用全宽）
首先，我想知道这是否可能，因为我不能使它工作。
我可以让它在移动的设备上每行显示1列。但以这种方式展示这个顺序对我来说是一个真实的的痛苦。而且我已经尝试了3天不同的解决方案都没有成功。
下面是布局的HTML代码

<div class="angry-grid">
  <header>header here</header>
  <main>main here</main>
  <aside>aside</aside>
  <section id="alerts">alerts here</section>
  <section id="weather">weather here</section>
  <section id="categories">categories here</section>
  <section id="about">about us here</section>
  <footer>footer here</footer>
</div>

我想要实现的代表性图像x1c 0d1x
这就是问题所在的CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.angry-grid {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "header header header header"
    "main main main aside"
    "alerts weather categories about"
    "footer footer footer footer";
  gap: 0px;
  height: 100%;
}
header {
  background-color: #779999;
  grid-area: header;
  height: 50px;
}
main {
  background-color: #8dd9b5;
  grid-area: main;
}
aside {
  background-color: #dd9b95;
  grid-area: aside;
}
#alerts {
  background-color: #ae69d5;
  grid-area: alerts;
  height: 200px;
}
#weather {
  background-color: #b5e5eb;
  grid-area: weather;
  height: 200px;
}
#categories {
  background-color: #6e7c57;
  grid-area: categories;
  height: 200px;
}
#about {
  background-color: #b5ba58;
  grid-area: about;
  height: 200px;
}
footer {
  background-color: #bdfb59;
  grid-area: footer;
  height: 50px;
}

@media (max-width: 767px) {
  .angry-grid {
    grid-template-areas: "header" "main" "aside" "alerts weather" "categories about" "footer";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 50% 50% 1fr;
  }
}

我几乎放弃，并开始创建一个网页设计与旧1995年的html表;）

jquery

来源：https://stackoverflow.com/questions/76472171/making-grid-layout-responsive-to-display-1-and-2-columns-on-mobile-devices

1条答案

按热度按时间

9njqaruj1#

你的grid-template-areas关了。
试试这些：

grid-template-areas:
    "header header"
    "main main"
    "aside aside"
    "alerts weather"
    "categories about"
    "footer footer ";

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.angry-grid {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "header header"
    "main main"
    "aside aside"
    "alerts weather"
    "categories about"
    "footer footer ";
  gap: 0px;
  height: 100%;
}
header {
  background-color: #779999;
  grid-area: header;
  height: 50px;
}
main {
  background-color: #8dd9b5;
  grid-area: main;
}
aside {
  background-color: #dd9b95;
  grid-area: aside;
}
#alerts {
  background-color: #ae69d5;
  grid-area: alerts;
  height: 200px;
}
#weather {
  background-color: #b5e5eb;
  grid-area: weather;
  height: 200px;
}
#categories {
  background-color: #6e7c57;
  grid-area: categories;
  height: 200px;
}
#about {
  background-color: #b5ba58;
  grid-area: about;
  height: 200px;
}
footer {
  background-color: #bdfb59;
  grid-area: footer;
  height: 50px;
}

@media (max-width: 767px) {
  .angry-grid {
    grid-template-areas: "header" "main" "aside" "alerts weather" "categories about" "footer";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 50% 50% 1fr;
  }
}

<div class="angry-grid">
  <header>header here</header>
  <main>main here</main>
  <aside>aside</aside>
  <aside id="alerts">alerts here</aside>
  <aside id="weather">weather here</aside>
  <aside id="categories">categories here</aside>
  <aside id="about">about us here</aside>
  <footer>footer here</footer>
</div>

编辑

尝试grid-template速记语法

grid-template:
        "header header" min-content
        "main main" 1fr
        "aside aside" min-content
        "alerts weather" min-content
        "categories about" min-content
        "footer footer" min-content
        / 1fr 1fr;

这样您就能够更好地维护模板区域、列和行之间的关系。

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.angry-grid {
  display: grid;
  grid-template:
    "header header" min-content
    "main main" 1fr
    "aside aside" min-content
    "alerts weather" min-content
    "categories about" min-content
    "footer footer" min-content
    / 1fr 1fr;
  gap: 0px;
  height: 100%;
}
header {
  background-color: #779999;
  grid-area: header;
  min-height: 50px;
}
main {
  background-color: #8dd9b5;
  grid-area: main;
}
aside {
  background-color: #dd9b95;
  grid-area: aside;
}
#alerts {
  background-color: #ae69d5;
  grid-area: alerts;
  min-height: 200px;
}
#weather {
  background-color: #b5e5eb;
  grid-area: weather;
  min-height: 200px;
}
#categories {
  background-color: #6e7c57;
  grid-area: categories;
  min-height: 200px;
}
#about {
  background-color: #b5ba58;
  grid-area: about;
  min-height: 200px;
}
footer {
  background-color: #bdfb59;
  grid-area: footer;
  min-height: 50px;
}

@media (max-width: 767px) {
  .angry-grid {
    grid-template-areas: "header" "main" "aside" "alerts weather" "categories about" "footer";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 50% 50% 1fr;
  }
}

<div class="angry-grid">
  <header>header here</header>
  <main>main here</main>
  <aside>aside</aside>
  <aside id="alerts">alerts here</aside>
  <aside id="weather">weather here</aside>
  <aside id="categories">categories here</aside>
  <aside id="about">about us here</aside>
  <footer>footer here</footer>
</div>

赞(0）回复(0）举报 2023-06-22

我来回答

jquery 使网格布局响应于在移动的设备上显示1列和2列

1条答案

编辑

相关问题

热门标签

最新问答