在2列布局中使用2列，但在CSS网格中使用1列布局时不使用@media
宽屏幕所需的布局： 窄屏幕所需的布局： 初始CSS： .布局{ 显示：网格； 网格模板列：repeatauto-fit，minmax240px，1fr； 栅极间隙：24px 40px； } 如果我将第三个元素设置为grid column start:span 2，那么当出现问题时，布局将被破坏 请不要使用媒体查询，因为它将使CSS网格中公布的基于可用空间的响应无效 网格有两个非常强大的特性来处理 可用空间 依赖于媒体查询的布局绑定到视图端口，这 不是模块化的吗？系统中的组件需要能够适应 他们现有的空间 使用网格柱：1/-1 .盒子{ 显示：网格； 网格模板列：repeatauto-fit，minmax240px，1fr； 栅极间隙：24px 40px； } 跨度{ 高度：50px； 背景：蓝色； } .更多{ 网格柱：1/-1； 背景：红色； } 使用网格柱：1/-1 .盒子{ 显示：网格； 网格模板列：repeatauto-fit，minmax240px，1fr； 栅极间隙：24px 40px； } 跨度{ 高度：50px； 背景：蓝色； } .更多{ 网格柱：1/-1； 背景：红色； }在2列布局中使用2列，但在CSS网格中使用1列布局时不使用@media,css,css-grid,Css,Css Grid,宽屏幕所需的布局： 窄屏幕所需的布局： 初始CSS： .布局{ 显示：网格； 网格模板列：repeatauto-fit，minmax240px，1fr； 栅极间隙：24px 40px； } 如果我将第三个元素设置为grid column start:span 2，那么当出现问题时，布局将被破坏 请不要使用媒体查询，因为它将使CSS网格中公布的基于可用空间的响应无效 网格有两个非常强大的特性来处理 可用空间 依赖于媒体查询的布局绑定到视图端口，这 不是模块化的吗？系统中的组件需要能够适应 他们现有
最后，我想我可以解决您的问题，但是使用flex而不是网格。这相当棘手 主元素是一个名为wrapper的类，它具有display:flex；。 您可以在那里插入网格项，现在称为包装容器 我需要这个助手类来重新创建网格间距属性。现在我用填充物代替。请注意，填充的效果与网格间距有点不一致，所以我必须将间距除以2 每个包装容器都有一个wrapper-container\uuuu项子项，它包含您的内容。当您检查这些元素时，您会注意到，它们的宽度至少为240px，这是由它们的min width属性引起的 当您希望一个元素跨越两列时，将wrapper-container类添加到包装容器中。它正在应用宽度：100%，以便该元素将是全尺寸的。没有类的元素具有flex:1，因此它们将像两列网格一样彼此相邻 如果有任何歧义，请随时询问 代码笔： .包装纸{ 位置：相对位置； 宽度：100%； 背景：dedede； 显示器：flex； 弯曲方向：行； 柔性包装：包装； } .包装容器{ 位置：相对位置； 填充：12px 20px； } .wrapper容器：不是.wrapper-container\uu{ 弹性：1； } .wrapper-container.wrapper-container\uu{ 宽度：100%！重要； } .wrapper-container\u项目{ 位置：相对位置； 最小宽度：240px； 最小高度：64px； 宽度：100%； } 瑞德先生{ 背景：e53935； } 格林先生{ 背景：388e3c； } 项目1 项目2 项目3 项目4 项目5
最后，我想我可以解决您的问题，但是使用flex而不是网格。这相当棘手 主元素是一个名为wrapper的类，它具有display:flex；。 您可以在那里插入网格项，现在称为包装容器 我需要这个助手类来重新创建网格间距属性。现在我用填充物代替。请注意，填充的效果与网格间距有点不一致，所以我必须将间距除以2 每个包装容器都有一个wrapper-container\uuuu项子项，它包含您的内容。当您检查这些元素时，您会注意到，它们的宽度至少为240px，这是由它们的min width属性引起的 当您希望一个元素跨越两列时，将wrapper-container类添加到包装容器中。它正在应用宽度：100%，以便该元素将是全尺寸的。没有类的元素具有flex:1，因此它们将像两列网格一样彼此相邻 如果有任何歧义，请随时询问 代码笔： .包装纸{ 位置：相对位置； 宽度：100%； 背景：dedede； 显示器：flex； 弯曲方向：行； 柔性包装：包装； } .包装容器{ 位置：相对位置； 填充：12px 20px； } .wrapper容器：不是.wrapper-container\uu{ 弹性：1； } .wrapper-container.wrapper-container\uu{ 宽度：100%！重要； } .wrapper-container\u项目{ 位置：相对位置； 最小宽度：240px； 最小高度：64px； 宽度：100%； } 瑞德先生{ 背景：e53935； } 格林先生{ 背景：388e3c； } 项目1 项目2 项目3 项目4 项目5
使用flex的可行解决方案，如MichaelT .布局{ 边框：实心1px黑色； 保证金：2倍； 位置：相对位置； } .内部布局{ 显示器：flex； 柔性包装：包装； 位置：相对位置； 左：-10px； 右：10px； 宽度：calc100%+20px； } 跨度{ 背景颜色：绿色； 高度：40px； 惯性矩 n-宽度：240px； 宽度：40%； 利润率：15px 10px； 柔性生长：1； } .宽{ 宽度：100%； 背景色：红色； } 狭窄的{ 宽度：300px； }
使用flex的可行解决方案，如MichaelT .布局{ 边框：实心1px黑色； 保证金：2倍； 位置：相对位置； } .内部布局{ 显示器：flex； 柔性包装：包装； 位置：相对位置； 左：-10px； 右：10px； 宽度：calc100%+20px； } 跨度{ 背景颜色：绿色； 高度：40px； 最小宽度：240px； 宽度：40%； 利润率：15px 10px； 柔性生长：1； } .宽{ 宽度：100%； 背景色：红色； } 狭窄的{ 宽度：300px； }
是否要使用网格系统作为引导，具体化等。使用例如，我建议使用12列网格系统。“我想这会让事情变得更简单。”迈克尔谢谢你的评论。我的回答是：没有。我发现纯网格解决方案或确认没有这种解决方案。顺便说一下，Boostrap网格依赖于媒体查询！我认为在使用auto fit时，这是不可能处理的。您需要的正是一个4列的网格，所以我更喜欢使用网格模板列：repeat4，minmax0，1fr；。为了获得良好的响应体验，您必须包含媒体查询，这是一种推荐的处理方法。编辑：这样的网格可以很容易地用SASS实现，只需几行代码。@michaelT，好吧，如果我使用媒体查询，如果我需要在宽主栏和窄侧栏中重用相同的组件怎么办？由于组件的概念，目标组件不知道父元素（包括其宽度），但父元素必须不知道子组件基础结构，因此我们不能基于父CSS类重新定义子组件类。在网格技术实现之前，不可能通过CSS解决is。我没有完全理解您的意思，即父元素不能知道子元素的结构。这在任何时候都不是必要的。我刚刚发布了一个4柱网格的示例。也许它会更清晰。你想用网格系统作为引导，具体化等。使用例如，我建议使用12列网格系统。“我想这会让事情变得更简单。”迈克尔谢谢你的评论。我的回答是：没有。我发现纯网格解决方案或确认没有这种解决方案。顺便说一下，Boostrap网格依赖于媒体查询！我认为在使用auto fit时，这是不可能处理的。您需要的正是一个4列的网格，所以我更喜欢使用网格模板列：repeat4，minmax0，1fr；。为了获得良好的响应体验，您必须包含媒体查询，这是一种推荐的处理方法。编辑：这样的网格可以很容易地用SASS实现，只需几行代码。@michaelT，好吧，如果我使用媒体查询，如果我需要在宽主栏和窄侧栏中重用相同的组件怎么办？由于组件的概念，目标组件不知道父元素（包括其宽度），但父元素必须不知道子组件基础结构，因此我们不能基于父CSS类重新定义子组件类。在网格技术实现之前，不可能通过CSS解决is。我没有完全理解您的意思，即父元素不能知道子元素的结构。这在任何时候都不是必要的。我刚刚发布了一个4柱网格的示例。也许那时会更干净。我会记得你是CSS天才。这是你优雅地解决的我的第四个CSS问题。我会记住你是CSS天才。这是你优雅地解决的我的第四个CSS问题。