css-grid 相关问题

CSS Grid Layout是一种允许创建网格的W3C技术。它不需要使用浮动，表格，绝对定位甚至flexbox（另一种CSS3技术）来构建各种网格，从简单到复杂。一般情况下，请勿将此标记用于CSS网格系统。

将“网格线”扩展到 CSS 网格之外

假设有一个N×M的单元格，我怎样才能达到下面的效果。我可以制作一个 3x3 的网格。 [A][B][C] [D][E][F] [G][H][I] 添加间隙将元素隔开： [一] [二] [三] [D] [E] [F] [G] [H...

css css-grid

回答 1 投票 0

网格模板列 fr 到 px 值的转换

我有这个 HTML / CSS 片段： .test123 { 网格模板列：255px 255px；过渡：200ms；显示：网格；间隙：30px；。卡片 { 边框半径：50px；边框：1px实线#BBD...

css css-grid css-transitions

回答 2 投票 0

CSS - grid-template-columns fr 到 px 值的转换

我有这个 HTML / CSS 片段： .test123 { 网格模板列：255px 255px；过渡：200ms；显示：网格；间隙：30px；。卡片 { 边框半径：50px；边框：1px实线#BBD...

css css-grid css-transitions

回答 1 投票 0

Mapbox-gl 高度 100%

Mapbox 不适合它的容器。为什么不呢？这是渲染后的 html： Mapbox 不适合它的容器。为什么不呢？这是渲染后的html： <div class="map mapboxgl-map" id="mapBox"> <div class="mapboxgl-canvas-container"> <canvas class="mapboxgl-canvas" style="position: absolute; width: 1920px; height: 277px;" tabindex="0" aria-label="Map" width="1920" height="277"> </canvas> </div> </div> 那些 277px 我猜是默认值。这是js： mapboxgl.accessToken = 'blabla'; var map = new mapboxgl.Map({ container: 'mapBox', style: 'mapbox://styles/mapbox/streets-v11', center: [-77.04, 38.907], zoom: 11.15 }); 这是scss： .map { grid-column: 1/-1; height: 100%; position: relative; canvas, .mapboxgl-canvas { height: 100%; } } 如果我将著名的 !important 添加到 height: 100%; 那么它可以工作，但地图会被拉伸。我该怎么做？我找到了窍门。只需添加 map.on('load', function () { map.resize(); }); 到 js，这样地图就会根据其容器调整大小经过几个小时的尝试找到解决方案并在 SO 上尝试解决方案后，我终于明白了如何使 Mapbox 适合其容器。要使 mapbox 适合其容器，而不需要设置绝对高度，它必须是父 div 的直接第一个子级。 Mapbox 不能是第二个、第三个或第四个孩子等。为什么？我的猜测是 mapbox-gl.css 与自定义 CSS 规则发生冲突。这每次都有效： <section class="map_box_container">  <div id='map'></div> </section> 这永远行不通： <section class="map_box_container"> <div class="second_child">  <div id='map'></div> </div> </section> CSS .map_box_container{ position: relative; height: 100% !important; width: 100% !important; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } 2021 年更新我在一个新项目中使用mapbox，据我了解，mapbox 不需要其父容器具有任何CSS 才能工作。 HTML <section class="map_box_container">  <div id='map'></div> </section> CSS #map { position: absolute; top: 0; bottom: 0; width: 100%; } 这对我有用，并且在调整大小之前您不会像在接受的答案中那样看到明显的滞后： document.addEventListener("DOMContentLoaded", () => map.resize()); 将其添加到你的CSS中 .mapboxgl-map { position: absolute; top: 0; bottom: 0; width: 100%; } 和 { position: relative } 到其父 div 这个对我有用。虽然需要一段时间才能生效，但这是值得的。 map.on('load', function() { $('.mapboxgl-canvas').css('width', '100%'); $('.mapboxgl-canvas').css('height', '100%'); map.resize(); }); 没有绝对定位的纯 CSS 解决方案。新方法：添加到你的包装纸中： aspect-ratio: 1 / 1; 如果您想要一个矩形，请使用该值（例如：.9）。旧方法：每个父级的高度必须大于 0。请检查您的开发检查器。对于每个渲染高度为 0 的容器添加 height: 100%;。然后为您的地图包装器添加这两个 CSS 声明： height: 100%; max-height: 500px; 将 500 更改为在您的媒体查询中有效的任何内容，您应该会很好。 const [viewport, setViewport] = useState({ width: '100%', height: 'calc(100vh - 162px)', // 162px is size height of all elements at the top of the map latitude: 0, longitude: 0, zoom: 12, bearing: 0, pitch: 0, transitionDuration: 2000, transitionInterpolator: new FlyToInterpolator(), }); 2022 1- 更新您的地图脚本添加 map.resize() <script> map.on("load", () => {map.resize() </script> 2- 更新您的 html 添加 tailwind class="aspect-square w-full h-full" 或添加 style="aspect-ratio: 1 / 1": <div id="map" class="aspect-square w-full h-full" style="aspect-ratio: 1 / 1;" > </div> 对于使用react-map的人（也许还有其他人），这是我解决问题的方法： <div className="flex flex-col min-h-screen" /> <h1> Hey!</h1> <Map style={{ width: '100vw', height: 'inherit', flexGrow: 1 }} /> </div> 对我来说，关键是通过将其设置为继承来杀死 Mapbox 中的 height: 100%。注意：我使用的是 Tailwind。我发现的唯一可靠的方法是使用 jQuery。就我而言，地图位于页面加载时不活动的选项卡中，因此我在切换到保存地图的选项卡时执行代码。 var $ = window["$"]; $('.mapboxgl-canvas').css('width', '100%'); $('.mapboxgl-canvas').css('height', '100%'); 编辑：这可行，但地图看起来很丑而且像素化。我可能会回到 Google 地图。

jquery sass responsive-design css-grid mapbox-gl-js

回答 10 投票 0

如何在嵌套网格内实现全出血？

我希望能够在网格设置中进行全出血（在视口上从边缘到边缘显示项目）。我希望该项目具有完整的类别以跨越设计 -...

css css-grid subgrid

回答 1 投票 0

CSS 网格：嵌套网格内全出血

我希望能够在网格设置中进行全出血（在视口上从边缘到边缘显示项目）。我希望该项目具有完整的类别以跨越设计 -...

css css-grid subgrid

回答 1 投票 0

CSS 子网格跨多行对齐元素

我正在尝试创建一个卡片网格，其中元素（标题、内容、按钮）在所有卡片上完美对齐，甚至在不同的行上也是如此。虽然 CSS 子网格在单行内工作，但我无法理解

css layout css-grid subgrid

回答 1 投票 0

如何将CSS网格的一个单元格设置为不同的颜色

我想制作一个CSS网格，其中的单元格具有折叠的浅灰色边框，但焦点所在的单元格具有蓝色边框。这是一个例子： https://stackblitz.com/edit/stackblitz-starters-

html css css-grid

回答 1 投票 0

具有 minmax 的网格模板列在应该收缩时却没有收缩

我有一个基本布局 - 一个带有几张卡片的容器。每张卡片的宽度必须在 300 像素到 500 像素之间。我建议一个简单的网格模板列：repeat(auto-fit, minmax(300px, 500px)) 应该

css css-grid

回答 1 投票 0

带有 tailwindcss 的特殊网格布局

我想创建这种布局：我想使用流行的实用CSS框架“Tailwindcss”来实现这一点。有人知道如何继续吗？任何方向都会帮助我。我是...

css css-grid tailwind-css

回答 3 投票 0

Flex 奇怪地计算宽度，而网格不计算宽度

这里唯一的区别是父树，子树的样式完全相同。 Grid 正确计算第一个元素（绿色轮廓部分）的宽度，但 flex 将其设置为 0 并允许 ov...

css flexbox css-grid

回答 1 投票 0

从CSS网格布局更改为flexbox

我的任务是将使用 CSS 网格的给定代码更改为使用 CSS Flexbox 布局的代码。这是给定的 HTML 结构：我的任务是将使用 CSS 网格的给定代码更改为使用 CSS Flexbox 布局的代码。这是给定的 HTML 结构： <div class="listing-grid"> <div class="listing"> <img class="listing-image" src="something.jpg" alt="something"> <div class="listing-details"> <h3>Item 1</h3> </div> <div class="listing-price"> <p>Price: €8</p> </div> <a href="details.html" class="details-button">Details</a> </div> <div class="listing"> <img class="listing-image" src="something.jpg" alt="something"> <div class="listing-details"> <h3>Item 2</h3> </div> <div class="listing-price"> <p>Price: €5/p> </div> <a href="details.html" class="details-button">Details</a> </div> ...(4 more of these card like elements) <div> .listing-grid { display: grid; grid-template-columns: repeat(auto-fit, 300px); gap: 10px; padding: 10px; justify-content: center; align-content: center; } 代码生成了一个如下所示的网格： item1 item2 item3 item4 item5 item6 当我使用以下方式更改为 Flexbox 时： .listing-grid { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px; justify-content: center; align-content: center; } and adding to: .listing { width: calc(25% - 20px); } 我得到了这样的布局： item1 item2 item3 item4 item5 item6 我尝试将justify-content: center更改为justify-content: left，但这会将卡片向左对齐并将整个部分向左移动，这不适合我。也这样做，但添加 margin-left 似乎是解决这个问题的愚蠢方法，特别是因为它没有响应。还有其他方法可以在保留响应式设计和所需的卡片布局的同时使用 Flexbox 布局来实现此目的吗？ left 不是 justify-content 的有效值。您需要使用值 start。 .listing-grid { justify-content: start; } 演示片段： .listing-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: start; align-content: center; } .listing { width: calc(25% - 20px); } .listing img { max-width: 100%; } .listing h3, .listing p { margin: 0; } <div class="listing-grid"> <div class="listing"> <img class="listing-image" src="https://picsum.photos/200" alt="something"> <div class="listing-details"> <h3>Item 1</h3> </div> <div class="listing-price"> <p>Price: €1</p> </div> <a href="details.html" class="details-button">Details</a> </div> <div class="listing"> <img class="listing-image" src="https://picsum.photos/200" alt="something"> <div class="listing-details"> <h3>Item 2</h3> </div> <div class="listing-price"> <p>Price: €2/p> </div> <a href="details.html" class="details-button">Details</a> </div> <div class="listing"> <img class="listing-image" src="https://picsum.photos/200" alt="something"> <div class="listing-details"> <h3>Item 3</h3> </div> <div class="listing-price"> <p>Price: €3/p> </div> <a href="details.html" class="details-button">Details</a> </div> <div class="listing"> <img class="listing-image" src="https://picsum.photos/200" alt="something"> <div class="listing-details"> <h3>Item 4</h3> </div> <div class="listing-price"> <p>Price: €4/p> </div> <a href="details.html" class="details-button">Details</a> </div> <div class="listing"> <img class="listing-image" src="https://picsum.photos/200" alt="something"> <div class="listing-details"> <h3>Item 5</h3> </div> <div class="listing-price"> <p>Price: €5/p> </div> <a href="details.html" class="details-button">Details</a> </div> <div class="listing"> <img class="listing-image" src="https://picsum.photos/200" alt="something"> <div class="listing-details"> <h3>Item 6</h3> </div> <div class="listing-price"> <p>Price: €6/p> </div> <a href="details.html" class="details-button">Details</a> </div> <div>

html css flexbox alignment css-grid

回答 1 投票 0

CSS 网格 - 输入不考虑填充

我发现使用 CSS 网格布局时，输入不尊重其包含元素的右侧填充。具体来说，grid-template-colums css 属性似乎是罪魁祸首......

css css-grid

回答 4 投票 0

如何将元素拉伸到可用宽度？

一行最多可以有三列，然后添加新列表项时，有转移到新行且元素必须占据该行的整个可用宽度，并且如果

html css css-grid

回答 1 投票 0

使用符合最小宽度的 CSS 网格自动填充

我正在尝试将项目放置在具有相等宽度的列的网格中。我希望网格具有尽可能多的列，同时仍然尊重每个项目的最小宽度。似乎有类似的事情网格-