css-grid 相关问题

文档对于所有网格选项不是很清楚。我在 alpinejs 中有这个网格模板，用 tailwind 对其进行样式设计：文档对于所有网格选项不是很清楚。我在 alpinejs 中有这个网格模板，用 tailwind 对其进行样式设计： <div x-show="multiple" class="w-auto grid mt-3" :style="`grid-template-columns: repeat(${images.length < 6 ? images.length : 6}, minmax(0, 1fr))`"> <template x-for="image in images" :key="image.name"> <div x-data="{ imgUrl: null }" x-init="() => { let reader = new FileReader(); reader.onload = e => { imgUrl = e.target.result; }; console.log('image'); console.log(image); reader.readAsDataURL(image); }" > <img :src="imgUrl" alt="image.name" class="h-24 w-auto"> </div> </template> </div> 我面临的问题是网格容器似乎保持其父级的完整宽度，并且网格元素之间存在巨大的间隙：我想要的是每个图像都在左侧彼此很好地对齐。这里是片段 <script src="https://cdn.tailwindcss.com"></script> <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script> <style> [x-cloak] { display: none !important } </style> <div x-data="{ inputId: 'blabla', selectedFileName: '', fileInput: null, multiple: true, images: [], imgCols: 0 }" x-init="() => { fileInput = document.getElementById(inputId); }" class="w-full" x-on:drop="$event => { $event.preventDefault(); const dataTransfer = new DataTransfer(); if (multiple) { Array.from(fileInput.files).forEach(file => { dataTransfer.items.add(file); }); } Array.from($event.dataTransfer.files).forEach(file => { dataTransfer.items.add(file); }); fileInput.files = dataTransfer.files; if (!multiple) { selectedFileName = $event.dataTransfer.files[0].name; } else { images = Array.from(fileInput.files); } fileInput.dispatchEvent(new Event('change', { bubbles: true })); }" x-on:dragover.prevent="() => console.log('drag over prevented')" > <label class="flex justify-center w-full h-32 px-4 transition bg-white border-2 border-gray-300 border-dashed rounded-md appearance-none cursor-pointer hover:border-gray-400 focus:outline-none" > <span class="flex items-center space-x-2"> <x-icon name="upload" /> <span class="font-medium text-gray-600"> drop or <span class="text-blue-600 underline">browse</span> </span> </span> <input id="blabla" type="file" name="file_upload" > </label> <div x-cloak class="w-full text-center" x-show="selectedFileName"> files selected: <span x-text="selectedFileName"></span> </div> <div x-show="multiple" class="w-auto grid mt-3" :style="`grid-template-columns: repeat(${images.length < 6 ? images.length : 6}, minmax(0, 1fr))`"> <template x-for="image in images" :key="image.name"> <div x-data="{ imgUrl: null }" x-init="() => { let reader = new FileReader(); reader.onload = e => { imgUrl = e.target.result; }; reader.readAsDataURL(image); }" > <img :src="imgUrl" alt="image.name" class="h-24 w-auto"> </div> </template> </div> </div> 谢谢。空白是由于网格轨道列比它们包含的图像宽而引起的。这是由于 minmax(0, 1fr) 内的 repeat() 值造成的。该值意味着网格列轨道的宽度允许增加到 1“份额”的空间。为了防止这种行为，您可以考虑在 repeat() 中使用不同的值，例如 max-content: <script src="https://cdn.tailwindcss.com"></script> <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script> <style> [x-cloak] { display: none !important; } </style> <div x-data="{ inputId: 'blabla', selectedFileName: '', fileInput: null, multiple: true, images: [], imgCols: 0 }" x-init="() => { fileInput = document.getElementById(inputId); }" class="w-full" x-on:drop="$event => { $event.preventDefault(); const dataTransfer = new DataTransfer(); if (multiple) { Array.from(fileInput.files).forEach(file => { dataTransfer.items.add(file); }); } Array.from($event.dataTransfer.files).forEach(file => { dataTransfer.items.add(file); }); fileInput.files = dataTransfer.files; if (!multiple) { selectedFileName = $event.dataTransfer.files[0].name; } else { images = Array.from(fileInput.files); } fileInput.dispatchEvent(new Event('change', { bubbles: true })); }" x-on:dragover.prevent="() => console.log('drag over prevented')" > <label class="flex justify-center w-full h-32 px-4 transition bg-white border-2 border-gray-300 border-dashed rounded-md appearance-none cursor-pointer hover:border-gray-400 focus:outline-none" > <span class="flex items-center space-x-2"> <x-icon name="upload" /> <span class="font-medium text-gray-600"> drop or <span class="text-blue-600 underline">browse</span> </span> </span> <input id="blabla" type="file" name="file_upload" /> </label> <div x-cloak class="w-full text-center" x-show="selectedFileName"> files selected: <span x-text="selectedFileName"></span> </div> <div x-show="multiple" class="w-auto grid mt-3" :style="`grid-template-columns: repeat(${images.length < 6 ? images.length : 6}, max-content)`" > <template x-for="image in images" :key="image.name"> <div x-data="{ imgUrl: null }" x-init="() => { let reader = new FileReader(); reader.onload = e => { imgUrl = e.target.result; }; reader.readAsDataURL(image); }" > <img :src="imgUrl" alt="image.name" class="h-24 w-auto" /> </div> </template> </div> </div>

javascript css tailwind-css css-grid alpine.js

回答 1 投票 0

如何让元素从左下角浮动到右上角

是否有一种聪明而简单的方法将元素从左下角浮动到右上角？我的 display:grid 解决方案过于静态，并且具有固定的列且不超过 10 个项目。我正在寻找...

html css flexbox css-grid css-float

回答 1 投票 0

使用 CSS Grid 和 Div 元素的数据表

我使用 CSS Grid 和 Div 元素创建了一个数据表。以前，我使用 Display Flex，但在使用 Div 元素实现 rowspan 和 colspan 时遇到了困难。 HTML 代码：我使用 CSS Grid 和 Div 元素创建了一个数据表。以前，我使用 Display Flex，但在使用 Div 元素实现 rowspan 和 colspan 时遇到了麻烦。 HTML 代码： <div class="container"> <div class="grid-responsive"> <div class="grid rounded border"> <div class="grid-header"> <div class="grid-row"> <div class="grid-col grid-col-head">#</div> <div class="grid-col grid-col-head">First Name</div> <div class="grid-col grid-col-head">Last Name</div> <div class="grid-col grid-col-head">Roll</div> </div> </div> <div class="grid-body"> <div class="grid-row"> <div class="grid-col grid-col-tbody">1</div> <div class="grid-col grid-col-tbody">Sandip</div> <div class="grid-col grid-col-tbody">Saha</div> <div class="grid-col grid-col-tbody">10</div> </div> <div class="grid-row"> <div class="grid-col grid-col-tbody">2</div> <div class="grid-col grid-col-tbody">Rahul</div> <div class="grid-col grid-col-tbody">Saha</div> <div class="grid-col grid-col-tbody">20</div> </div> </div> </div> </div> </div> CSS代码： .grid-responsive{ overflow-x: auto; -webkit-overflow-scrolling: touch; } .grid .grid-header{ background-color: #e2e3e5; color: #000; } .grid .grid-row{ display: grid; grid-template-columns: 50px repeat(2, 1fr) 100px; } .grid .grid-row .grid-col{ padding: .5rem .5rem; border-right: 1px solid #cfd0d2; border-bottom: 1px solid #cfd0d2; } .grid .grid-row .grid-col:last-child{ border-right: none; } .grid .grid-row:last-child .grid-col{ border-bottom: none; } 演示要使用 rowspan，我们使用 'grid-row' CSS 属性要使用 colspan，我们使用 'grid-column' CSS 属性尝试在代码中使用它- HTML- <div class="container"> <div class="grid-responsive"> <div class="grid rounded border"> <div class="grid-header"> <div class="grid-row"> <div class="grid-col grid-col-head">#</div> <div class="grid-col grid-col-head">First Name</div> <div class="grid-col grid-col-head">Last Name</div> <div class="grid-col grid-col-head">Roll</div> </div> </div> <div class="grid-body"> <div class="grid-row"> <div class="grid-col grid-col-tbody">1</div> <div class="grid-col grid-col-tbody">Sandip</div> <div class="grid-col grid-col-tbody">Saha</div> <div class="grid-col grid-col-tbody">10</div> </div> <div class="grid-row"> <div class="grid-col grid-col-tbody">2</div> <div class="grid-col grid-col-tbody" style="grid-column: span 2;">Rahul Saha</div> <div class="grid-col grid-col-tbody">20</div> </div> <div class="grid-row"> <div class="grid-col grid-col-tbody" style="grid-row: span 2;">3</div> <div class="grid-col grid-col-tbody">Priya</div> <div class="grid-col grid-col-tbody">Singh</div> <div class="grid-col grid-col-tbody">30</div> </div> </div> </div> </div> </div> CSS- .grid-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .grid .grid-header { background-color: #e2e3e5; color: #000; } .grid .grid-row { display: grid; grid-template-columns: 50px repeat(2, 1fr) 100px; } .grid .grid-row .grid-col { padding: .5rem .5rem; border-right: 1px solid #cfd0d2; border-bottom: 1px solid #cfd0d2; } .grid .grid-row .grid-col:last-child { border-right: none; } .grid .grid-row:last-child .grid-col { border-bottom: none; } .grid-col-head { font-weight: bold; } .grid-col-tbody { background-color: #fff; }

html css flexbox bootstrap-5 css-grid

回答 1 投票 0

未定义高度时，CSS 网格中的基线垂直对齐在 Firefox 和 Safari 中不起作用

我需要将多个带有图片和标题的项目排列在网格的一行中，如下所示：图片的长宽比是已知的。柱的数量是已知的。网格的宽度继承自...

css firefox safari css-grid vertical-alignment

回答 1 投票 0

重新排序 CSS 网格中的列

我有以下 HTML： A B CD AAA 我有以下 HTML： <ul> <li> <p>A</p> <p>B</p> <p>C</p <p>D</p> </li> <li> <p>AAA</p> <p>BBB</p> <p>CCC</p <p>DDD</p> </li> <li> <p>A</p> <p>B</p> <p>C</p <p>D</p> </li> <li> <p>AAAAAA</p> <p>BBBBBB</p> <p>CCCCCC</p <p>DDDDDD</p> </li> </ul> li的实际数量是可变的，但每个li始终有4个p标签。我想将其布局在 CSS 网格中： +--------+--------+--------+--------+ | A | B | C | D | +--------+--------+--------+--------+ | AAA | BBB | CCC | DDD | +--------+--------+--------+--------+ | A | B | C | D | +--------+--------+--------+--------+ | AAAAAA | BBBBBB | CCCCCC | DDDDDD | +--------+--------+--------+--------+ 因此 ul 有一个包含 4 列的网格，每个 li 都是一个子网格。但是当屏幕宽度小于650px时，我想将布局切换为两列布局，并重新排序p标签： +--------+--------+ | A | C | +--------+--------+ | B | D | +--------+--------+ | AAA | CCC | +--------+--------+ | BBB | DDD | +--------+--------+ | A | C | +--------+--------+ | B | D | +--------+--------+ | AAAAAA | CCCCCC | +--------+--------+ | BBBBBB | DDDDDD | +--------+--------+ 这是我目前拥有的： ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-areas: "a b c d"; } li { display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; grid-column: span 4; } li p:nth-of-type(1) { grid-area: a; } li p:nth-of-type(2) { grid-area: b; } li p:nth-of-type(3) { grid-area: c; } li p:nth-of-type(4) { grid-area: d; } @media (max-width: 650px) { ul { grid-template-columns: 1fr 1fr; grid-template-areas: "a c" "b d"; } li { grid-row: span 2; } } 前两行显示正确，但之后“a c”和“b d”行相互重叠。怎样才能让布局不重叠？ ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); /* Define 4 columns */ gap: 10px; /* Optional: adds gap between rows/columns */ } li { display: grid; grid-template-columns: repeat(4, 1fr); /* Each li also has 4 columns */ } li p:nth-of-type(1) { grid-column: 1; /* Position first p in the first column */ } li p:nth-of-type(2) { grid-column: 2; /* Position second p in the second column */ } li p:nth-of-type(3) { grid-column: 3; /* Position third p in the third column */ } li p:nth-of-type(4) { grid-column: 4; /* Position fourth p in the fourth column */ } @media (max-width: 650px) { ul { grid-template-columns: repeat(2, 1fr); /* Only 2 columns in the ul */ } li { grid-template-columns: repeat(2, 1fr); /* Each li has 2 columns */ } li p:nth-of-type(1), /* A and C are in the first column */ li p:nth-of-type(3) { grid-column: 1; } li p:nth-of-type(2), /* B and D are in the second column */ li p:nth-of-type(4) { grid-column: 2; } } 列出项目在媒体查询中：网格切换为 ul 和 li 的 2 列。 p 元素重新定位，使得 A 和 C 位于第一列，B 和 D 位于第二列。

css css-grid

回答 1 投票 0

使用网格布局的CSS粘卡

我想要使用网格布局的粘性卡布局。这就是我设法实现的目标： 1 我想使用网格布局来设计粘性卡的布局。这就是我设法实现的目标： <div class="cards"> <div class="card">1</div> <div class="card">2</div> <div class="card">3</div> <div class="card">4</div> <div class="card">5</div> </div> :root { --card-top-offset: 3rem; --card-h: 36rem; } .cards { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: calc(var(--card-h) / 2); align-items: baseline; } .card { position: sticky; top: 0; height: var(--card-h); transition: all 0.5s; } for (const cards of document.querySelectorAll(".cards")) { let i = 0; for (const card of cards.children) { if (card.classList.contains("card")) { card.style.top = `calc(5vh + ${i} * var(--card-top-offset))`; i += 1; } } cards.style.setProperty( "grid-template-rows", `repeat(${i}, var(--card-h))`, ); } 前 4 张卡效果很好，但第五张卡比我预期的要早脱开。我认为这是因为父元素 cards 正在结束。有没有办法使用 css 网格来实现这种行为？我发现了一些其他方法，但它涉及对某些元素的某些高度进行硬编码，我想避免这种情况。您遇到的问题是由于粘性定位依赖于父容器的高度。当父容器结束时，粘性元素无法再粘在顶部。为了实现您正在寻找的行为，您可以利用 CSS 网格进行一些调整。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sticky Cards</title> <style> :root { --card-top-offset: 3rem; --card-h: 36rem; } body { margin: 0; padding: 0; font-family: Arial, sans-serif; } .cards { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: calc(var(--card-h) / 2); align-items: baseline; position: relative; padding-top: 5vh; } .card { position: sticky; top: calc(5vh + var(--card-top-offset) * var(--i)); height: var(--card-h); transition: all 0.5s; background: lightblue; } .card:nth-child(1) { --i: 0; } .card:nth-child(2) { --i: 1; } .card:nth-child(3) { --i: 2; } .card:nth-child(4) { --i: 3; } .card:nth-child(5) { --i: 4; } </style> </head> <body> <div class="cards"> <div class="card">1</div> <div class="card">2</div> <div class="card">3</div> <div class="card">4</div> <div class="card">5</div> </div> </body> </html> 这里，每张卡片都有一个 --i 自定义属性，用于确定其相对于顶部的位置。这避免了硬编码高度并允许更动态的设置。位置：粘性仍被使用，但具有计算的顶部偏移量。

html css css-grid sticky

回答 1 投票 0

如何将单个项目放置在响应式网格行上？

我正在使用网格来放置卡片。网格使用极小极大和自动适应来响应：网格模板列：重复（自动调整，minmax（250px，1fr））；但是，我想先放一张卡...

css css-grid

回答 2 投票 0

如果设置了align-items: end，CSS网格中的单元格会溢出

当我在我的示例中使用align-items: end 时，内容溢出，我不知道为什么。我期望与align-items:start 具有相同的行为。我尝试设置宽度但找不到解决方案...

css layout css-grid

回答 1 投票 0

如何根据可用空间更改列/行行为？

我有一组卡片，它们有自己的卡片，如下所示（我正在使用 TailwindCSS 顺便说一句）：我有一组卡片，它们有自己的卡片，就像这样（我正在使用 TailwindCSS 顺便说一句）： <script src="https://cdn.tailwindcss.com"></script> <div class="grid grid-cols-3 gap-4"> <div class="flex flex-wrap justify-between gap-4 border"> <div class="flex-grow">Content 1</div> <div class="flex-grow">Content 2</div> <div class="flex-grow">Content 3</div> </div> <div class="flex flex-wrap justify-between gap-4 border"> <div class="flex-grow">Content 4</div> <div class="flex-grow">Content 5</div> </div> </div> 最终结果会是这样的，这很好：显示卡片渲染结果的图像但是根据屏幕尺寸，我可以得到这样的结果：显示第二张卡上有间隙的卡的渲染结果的图像所以，我想做的是，当有可用空间时，“迷你卡”的行为就像行而不是列，就像这样（但动态）：显示第二张卡片上没有间隙的卡片渲染结果的图像 <script src="https://cdn.tailwindcss.com"></script> <div class="grid grid-cols-3 gap-4"> <div class="flex flex-wrap justify-between gap-4 border"> <div class="flex-grow">Content 1</div> <div class="flex-grow">Content 2</div> <div class="flex-grow">Content 3</div> </div> <div class="flex flex-wrap flex-col justify-between gap-4 border"> <div class="flex-grow">Content 4</div> <div class="flex-grow">Content 5</div> </div> </div> 有没有办法用 CSS 来实现这一点？如果使用 Flexbox 作为外部容器而不是 Grid 怎么样？ <script src="https://cdn.tailwindcss.com"></script> <div class="flex gap-4"> <div class="flex flex-wrap justify-between gap-4 border"> <div class="flex-grow">Content 1</div> <div class="flex-grow">Content 2</div> <div class="flex-grow">Content 3</div> </div> <div class="flex flex-wrap justify-between gap-4 border"> <div class="flex-grow">Content 4</div> <div class="flex-grow">Content 5</div> </div> </div>

html css layout tailwind-css css-grid

回答 1 投票 0

更改某行的背景颜色

我有这段代码，我想更改倒数第五行的背景颜色。我知道我需要使用 nth-last-child。有人可以告诉我代码吗？ .grid-container { 显示：网格；网格-

css css-grid

回答 1 投票 0

CSS 网格行高 Safari 错误

我制作了一个网格模板，其中包含 1fr 1fr 1fr 行。中间行有一个内联图像列表。在 Chrome 和 Firefox 中，图像尊重网格行的高度并适当调整。

html css safari css-grid

回答 4 投票 0

CSS grid/flex 根据内容收缩但均匀增长

我正在为我的应用程序构建一个导航栏。我想让我的项目根据其内容缩小，但根据平均大小增长。我想要的只是：如果有足够的空间容纳所有项目 max-c...