html - 【求助】css grid布局问题？
问题1：
box1为grid-template-columns: repeat(auto-fill, 20; grid-row-gap: 20px;的情况下没有办法1行5个？
如下图：
问题2：
box2为grid-template-columns: auto auto auto auto auto;的情况下，li不足5个是，li的宽度会增多？
如下图：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>html</title> <style> ul,li { padding: 0; margin: 0; list-style-type: none; } .box1 { margin: 0 auto; background: green; width: 500px; display: grid; grid-auto-flow: row; grid-template-columns: repeat(auto-fill, 20%); grid-row-gap: 20px; grid-column-gap: 20px; } .box1 li { background-color: red; } .box2 { margin: 20px auto; background: green; width: 500px; display: grid; grid-auto-flow: row; grid-template-columns: auto auto auto auto auto; grid-row-gap: 20px; grid-column-gap: 20px; } .box2 li { background-color: red; } </style></head><body> <ul class="box1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <ul class="box2"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <ul class="box2"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul></body></html>共有1个答案
这样?
grid-template-columns: repeat(auto-fit, calc((100% - 4 * 20px) / 5));-
主要内容：在线实例,网站布局,HTML 布局 - 使用<div> 元素,实例,HTML 布局 - 使用表格,实例,HTML 布局 - 有用的提示,HTML 布局标签网页布局对改善网站的外观非常重要。 请慎重设计您的网页布局。 在线实例 使用 <div> 元素的网页布局 如何使用 <div> 元素添加布局。 使用 <table> 元素的网页布局 如何使用 <table> 元素添加布局。 网站布局 大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。 大多数网站可以使用 <div> 或者 <ta
-
网页布局对改善网站的外观非常重要。 请慎重设计您的网页布局。 上面的 HTML 代码会产生如下结果： HTML 布局 - 使用表格 使用 HTML <table> 标签是创建布局的一种简单的方式。 大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。 即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是
-
描述 (Description) 卡片HTML布局包含许多类，如下所示 - S.No 课程和描述 1 cards 这是卡片容器。 2 card-header 它是可选的卡片标题，用于显示卡片标题。 3 card-footer 它是可选的，用于指定其他信息或自定义链接。 4 card-content 它是卡内容的主要容器，是必需的。 5 card-content-inner 它是可选的附加内包装，用
-
问题内容： 我有以下HTML布局： 是否有机会仅在 不 使用CSS 更改HTML的情况下 在下面的示例网格上排列列？ 问题答案： 这样的事情应该做到： 编辑 要使用大量列来执行此操作，您可以构建一个非常简单的网格系统。例如，这样的事情应该适用于五列布局： 或者，如果您很幸运能够仅支持现代浏览器：
-
媒体查询助手类 Media Query Helper Classes Jquery Mobile给html元素增加了用来模拟浏览器的水平竖直方向以及常用的最?最大宽度css媒介查询class.这些class会在加载，调整大小以及方向变化时更新，使你能够在css中切断这些class，以创建有响应的布局，即使在不支持媒介查询的浏览器中也可以实现 方向类 Orientation Classes 取决于浏
-
问题内容： 是Android开发的新手。我已经创建了一个android应用，下面是我的main.xml 正在收到以下警告： 谁能说出此警告的原因和解决方案。 问题答案： 在RelativeLayout中仅使用LinearLayout并没有实际用途。因此，其中之一是无用的，因为这是多余的。 编辑 当版式只有一个孩子也是版式时，将触发此警告。在这种情况下，两者都可以移除而没有任何问题。建议删除这些多余