blocks|key|2317033|text|因为您在行和列定义的中都有1fr，所以水平和垂直空间是受限制的-因此它们将由网格项平等地共享。尝试将行和列都改为auto，您可以看到一切正常，但还不够完美-请注意，悬停的网格项周围有空格：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|2317034|​|2317035|.grid--container+{
++height:+100vh;
++width:+100vw;
++max-height:+100%25;
++max-width:+100%25;
++display:+grid;
++grid-template-columns:+auto+auto;+/*+changed+*/
++grid-template-rows:+auto+auto;+/*+changed+*/
++border:+1px+solid+red;
}

.track--section+{
++border:+1px+dotted+grey;
++min-height:+0;
++min-width:+0;
}

.track--section:hover+{
++background-color:+#333;
++height:+75vh;
++width:+75vw;
}|code-block|syntax|javascript|2317036|<div+class="grid--container">
++<div+class="track--section">section1</div>
++<div+class="track--section">section2</div>
++<div+class="track--section">section3</div>
++<div+class="track--section">section4</div>
</div>|2317037|2317038|2317039|解决方案|2317040|您可以尝试这样做：|2317041|为此，使用grid-auto-rows:+1fr使用grid-template-columns:+1fr+1fr|2317042|implicit+|unordered-list-item|2317043|2列布局|2317044|2317045|2317046|参见下面的demo：|2317047|2317048|.grid--container+{
++height:+100vh;
++width:+100vw;
++max-height:+100%25;
++max-width:+100%25;
++display:+grid;
++grid-template-columns:+1fr+1fr;+/*+2+columns+*/
++grid-auto-rows:+1fr;+/*+implicit+rows+*/
++border:+1px+solid+red;
}

.track--section+{
++border:+1px+dotted+grey;
++min-height:+0;
++min-width:+0;
}

.track--section:hover+{
++background-color:+#333;
++height:+75vh;
++width:+75vw;
}|2317049|<div+class="grid--container">
++<div+class="track--section">section1</div>
++<div+class="track--section">section2</div>
++<div+class="track--section">section3</div>
++<div+class="track--section">section4</div>
</div>|2317050|2317051|你可以在这里阅读更多关于显式和隐式网格的内容：CSS+Grid+unwanted+column+added+automatically。|2317052|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/55956781^0|A|2C|D|3|0|0|1|0|0|0|0|1|0|0|0|4|0|0|9|0|0|1K|5|J|Q|U|0|0|9|0|0|4|0|0|0|0|A|0|0|1|0|0|0|0|1|0|0|1W|N|18|0|0^^$0|@$1|2|3|4|5|6|7|1M|8|@$9|1N|A|1O|B|C]|$9|1P|A|1Q|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|1R|8|@$9|1S|A|1T|B|C]]|E|@]|F|$]]|$1|I|3|J|5|K|7|1U|8|@]|E|@]|F|$L|M]]|$1|N|3|O|5|K|7|1V|8|@]|E|@]|F|$L|M]]|$1|P|3|H|5|6|7|1W|8|@$9|1X|A|1Y|B|C]]|E|@]|F|$]]|$1|Q|3|-4|5|6|7|1Z|8|@]|E|@]|F|$]]|$1|R|3|S|5|6|7|20|8|@$9|21|A|22|B|C]]|E|@]|F|$]]|$1|T|3|U|5|6|7|23|8|@$9|24|A|25|B|C]]|E|@]|F|$]]|$1|V|3|W|5|6|7|26|8|@$9|27|A|28|B|C]|$9|29|A|2A|B|D]|$9|2B|A|2C|B|D]]|E|@]|F|$]]|$1|X|3|Y|5|Z|7|2D|8|@$9|2E|A|2F|B|C]]|E|@]|F|$]]|$1|10|3|11|5|Z|7|2G|8|@$9|2H|A|2I|B|C]]|E|@]|F|$]]|$1|12|3|-4|5|6|7|2J|8|@]|E|@]|F|$]]|$1|13|3|-4|5|6|7|2K|8|@]|E|@]|F|$]]|$1|14|3|15|5|6|7|2L|8|@$9|2M|A|2N|B|C]]|E|@]|F|$]]|$1|16|3|H|5|6|7|2O|8|@$9|2P|A|2Q|B|C]]|E|@]|F|$]]|$1|17|3|18|5|K|7|2R|8|@]|E|@]|F|$L|M]]|$1|19|3|1A|5|K|7|2S|8|@]|E|@]|F|$L|M]]|$1|1B|3|H|5|6|7|2T|8|@$9|2U|A|2V|B|C]]|E|@]|F|$]]|$1|1C|3|1D|5|6|7|2W|8|@$9|2X|A|2Y|B|C]]|E|@$9|2Z|A|30|1|31]]|F|$]]|$1|1E|3|-4|5|6|7|32|8|@]|E|@]|F|$]]]|1F|$1G|$5|1H|1I|1J|F|$1K|1L]]]]

<p>Because you have <code>1fr</code> in <strong>both</strong> your row and column definitions, the horizontal and vertical space is <em>constrained</em> - so they will be <em>equally shared</em> by the grid items. Try changing this to <em>auto</em> for both rows and columns and you can see things working just about okay, but not perfect yet - note that there are <em>whitespaces</em> around the <em>hovered</em> grid items:</p>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.grid--container {
  height: 100vh;
  width: 100vw;
  max-height: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: auto auto; /* changed */
  grid-template-rows: auto auto; /* changed */
  border: 1px solid red;
}

.track--section {
  border: 1px dotted grey;
  min-height: 0;
  min-width: 0;
}

.track--section:hover {
  background-color: #333;
  height: 75vh;
  width: 75vw;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid--container"&gt;
  &lt;div class="track--section"&gt;section1&lt;/div&gt;
  &lt;div class="track--section"&gt;section2&lt;/div&gt;
  &lt;div class="track--section"&gt;section3&lt;/div&gt;
  &lt;div class="track--section"&gt;section4&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<hr>
<h3>Solution</h3>
<p>You can try this:</p>
<ul>
<li>a 2 column layout using <code>grid-template-columns: 1fr 1fr</code></li>
<li><em>implicit rows</em> for this using <code>grid-auto-rows: 1fr</code></li>
</ul>
<p>See demo below:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.grid--container {
  height: 100vh;
  width: 100vw;
  max-height: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columns */
  grid-auto-rows: 1fr; /* implicit rows */
  border: 1px solid red;
}

.track--section {
  border: 1px dotted grey;
  min-height: 0;
  min-width: 0;
}

.track--section:hover {
  background-color: #333;
  height: 75vh;
  width: 75vw;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid--container"&gt;
  &lt;div class="track--section"&gt;section1&lt;/div&gt;
  &lt;div class="track--section"&gt;section2&lt;/div&gt;
  &lt;div class="track--section"&gt;section3&lt;/div&gt;
  &lt;div class="track--section"&gt;section4&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>You can read more about <em>Explicit and Implicit Grids</em> here: <a href="https://stackoverflow.com/questions/55956781">CSS Grid unwanted column added automatically</a>.</p>


<p>In the following code, why do the grid track cells not dynamically shrink when the other cells are enlarged?</p>

<p>In the snippet, if you hover over any track section, that cell grows to 75% of the viewpoint, however rather than the other sections of the grid shrinking to accommodate the newly sized section, they all stay at their original size causing the cells to expand out beyond the size of the grid.   </p>

<p>I would like to create sections of the grid that can be resized by hovering over them with the other sections of the grid shrinking to accommodate the new size. </p>

<p>Is there a way to do this, and more importantly, why does my code not work?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.grid--container {
  height: 100vh;
  width: 100vw;
  max-height: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid red;
}

.track--section {
  border: 1px dotted grey;
  min-height: 0;
  min-width: 0;
}

.track--section:hover {
  background-color: #333;
  height: 75vh;
  width: 75vw;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid--container"&gt;
  &lt;div class="track--section"&gt;section1&lt;/div&gt;
  &lt;div class="track--section"&gt;section2&lt;/div&gt;
  &lt;div class="track--section"&gt;section3&lt;/div&gt;
  &lt;div class="track--section"&gt;section4&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


Tracks of CSS grid not shrinking when other tracks grow

在下面的代码中，为什么网格跟踪单元格在其他单元格放大时不动态缩小？在代码片段中，如果您将鼠标悬停在任何轨迹部分上，该单元格将增长到视点的75%，但是，网格的其他部分不会收缩以容纳新大小的部分，它们都保持原始大小，从而导致单元格扩展到超出网格的大小。我想创建网格的部分，可以通过将鼠标悬停在它们上面来调整网格的大小，同时网...

问CSS网格的轨道不会随着其他轨道的增长而缩小
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS网格的轨道不会随着其他轨道的增长而缩小EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS网格的轨道不会随着其他轨道的增长而缩小
EN