css之display：grid布局改块级元素布局

1.问题：

div是块级元素，一个div元素占一行，但是，今天测试样式时，总是会有两个div并占一行，很困惑，结果发现是app这个样式

在main.css里

#app样式布局在main.ts里被应用

2.原因以及样式分析

@import './base.css';

#app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  font-weight: normal;
}

a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
  padding: 3px;
}

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}

@media (min-width: 1024px) {
  body {
    display: flex;
    place-items: center;
  }

  #app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 2rem;
  }
}

整体功能

这段代码是一个CSS样式表，用于设置一个名为#app的元素的样式，使其在屏幕宽度大于等于1024px时，以两列网格布局显示，并且在不同屏幕宽度下有不同的布局调整，以实现响应式设计。

代码结构

• 媒体查询：@media (min-width: 1024px)表示当屏幕宽度大于等于1024px时，应用以下样式。
• #app元素的样式：在媒体查询内部，#app元素被设置为display: grid，表示使用CSS网格布局，grid-template-columns: 1fr 1fr表示将#app元素划分为两列，每列的宽度为1份弹性空间，padding: 0 2rem表示在水平方向上设置2rem的内边距。
• #app元素的其他样式：在媒体查询外部，#app元素还被设置了max-width: 1280px，表示其最大宽度为1280px，margin: 0 auto表示在水平方向上居中显示，padding: 2rem表示在四周设置2rem的内边距，font-weight: normal表示字体粗细为正常。
• 全局样式：*表示所有元素，*::before和*::after表示所有元素的伪元素，这些元素被设置为box-sizing: border-box，表示使用盒模型，margin: 0表示外边距为0，font-weight: normal表示字体粗细为正常。

响应式设计

• 大屏幕布局：当屏幕宽度大于等于1024px时，#app元素以两列网格布局显示，每列宽度自适应，水平方向有2rem的内边距，最大宽度为1280px，水平居中。
• 小屏幕布局：当屏幕宽度小于1024px时，由于没有在媒体查询外部设置#app元素的其他布局样式，可能会采用默认的布局方式，比如堆叠显示等。

3.grid布局改快级元素布局

display: block; /* 将grid布局改为块级元素布局，不再是两列显示 */