<i id='K9eqs'><tr id='K9eqs'><dt id='K9eqs'><q id='K9eqs'><span id='K9eqs'><b id='K9eqs'><form id='K9eqs'><ins id='K9eqs'></ins><ul id='K9eqs'></ul><sub id='K9eqs'></sub></form><legend id='K9eqs'></legend><bdo id='K9eqs'><pre id='K9eqs'><center id='K9eqs'></center></pre></bdo></b><th id='K9eqs'></th></span></q></dt></tr></i><div id='K9eqs'><tfoot id='K9eqs'></tfoot><dl id='K9eqs'><fieldset id='K9eqs'></fieldset></dl></div>

        <bdo id='K9eqs'></bdo><ul id='K9eqs'></ul>

    1. <tfoot id='K9eqs'></tfoot>

      <small id='K9eqs'></small><noframes id='K9eqs'>

      <legend id='K9eqs'><style id='K9eqs'><dir id='K9eqs'><q id='K9eqs'></q></dir></style></legend>

      如何让 CSS Grid 项目占用剩余空间?

      How to make CSS Grid items take up remaining space?(如何让 CSS Grid 项目占用剩余空间?)
          <bdo id='BmsxT'></bdo><ul id='BmsxT'></ul>
            <tfoot id='BmsxT'></tfoot>
            • <i id='BmsxT'><tr id='BmsxT'><dt id='BmsxT'><q id='BmsxT'><span id='BmsxT'><b id='BmsxT'><form id='BmsxT'><ins id='BmsxT'></ins><ul id='BmsxT'></ul><sub id='BmsxT'></sub></form><legend id='BmsxT'></legend><bdo id='BmsxT'><pre id='BmsxT'><center id='BmsxT'></center></pre></bdo></b><th id='BmsxT'></th></span></q></dt></tr></i><div id='BmsxT'><tfoot id='BmsxT'></tfoot><dl id='BmsxT'><fieldset id='BmsxT'></fieldset></dl></div>
            • <small id='BmsxT'></small><noframes id='BmsxT'>

            • <legend id='BmsxT'><style id='BmsxT'><dir id='BmsxT'><q id='BmsxT'></q></dir></style></legend>

                  <tbody id='BmsxT'></tbody>

                本文介绍了如何让 CSS Grid 项目占用剩余空间?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

                问题描述

                我有一张使用 CSS 网格布局构建的卡片.左边可能有一张图片,右上角可能有一些文字,右下角可能有一个按钮或链接.

                I have a card built with CSS Grid layout. There might be an image to the left, some text to the right top and maybe a button or a link at the right bottom.

                在下面的代码中,如何让绿色区域占用尽可能多的空间,同时让蓝色区域占用尽可能少的空间?

                In the code below, how can I make the green area take up as much space as possible and at the same time make the blue area take up as little space as possible?

                绿色应尽可能将蓝色区域向下推.

                The green should push the blue area down as far as possible.

                https://jsfiddle.net/9nxpvs5m/

                .grid {
                  display: grid;
                  grid-template-columns: 1fr 3fr;
                  grid-template-areas:
                    "one two"
                    "one three"
                }
                
                .one {
                  background: red;
                  grid-area: one;
                  padding: 50px 0;
                }
                
                .two {
                  background: green;
                  grid-area: two;
                }
                
                .three {
                  background: blue;
                  grid-area: three;
                }

                <div class="grid">
                  <div class="one">
                    One
                  </div>
                  <div class="two">
                    Two
                  </div>
                  <div class="three">
                    Three
                  </div>
                </div>

                推荐答案

                添加 grid-template-rows: 1fr min-content; 到你的 .grid 会得到你正是你所追求的:).

                Adding grid-template-rows: 1fr min-content; to your .grid will get you exactly what you're after :).

                .grid {
                  display: grid;
                  grid-template-columns: 1fr 3fr;
                  grid-template-rows: 1fr min-content;
                  grid-template-areas:
                    "one two"
                    "one three"
                }
                
                .one {
                  background: red;
                  grid-area: one;
                  padding: 50px 0;
                }
                
                .two {
                  background: green;
                  grid-area: two;
                }
                
                .three {
                  background: blue;
                  grid-area: three;
                }

                <div class="grid">
                  <div class="one">
                    One
                  </div>
                  <div class="two">
                    Two
                  </div>
                  <div class="three">
                    Three
                  </div>
                </div>

                Jens 为了获得更好的浏览器支持,可以改用:grid-template-rows: 1fr auto;,至少在这种情况下是这样.

                Jens edits: For better browser support this can be used instead: grid-template-rows: 1fr auto;, at least in this exact case.

                这篇关于如何让 CSS Grid 项目占用剩余空间?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

                本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

                相关文档推荐

                quot;Status Code:200 OK (from ServiceWorker)quot; in Chrome Network DevTools?(“状态码:200 OK(来自 ServiceWorker)在 Chrome 网络开发工具中?)
                What is quot;X-Content-Type-Options=nosniffquot;?(什么是“X-Content-Type-Options=nosniff?)
                SmtpJs API not working! is there any way to send emails using SMTP server with JavaScript or JQuery(SmtpJs API 不工作!有没有办法使用带有 JavaScript 或 JQuery 的 SMTP 服务器发送电子邮件)
                Can I send email using javascript(我可以使用 javascript 发送电子邮件吗)
                Select All the objects on canvas using Fabric.js(使用 Fabric.js 选择画布上的所有对象)
                Crop the image using JavaScript(使用 JavaScript 裁剪图像)

                  <i id='CTh1s'><tr id='CTh1s'><dt id='CTh1s'><q id='CTh1s'><span id='CTh1s'><b id='CTh1s'><form id='CTh1s'><ins id='CTh1s'></ins><ul id='CTh1s'></ul><sub id='CTh1s'></sub></form><legend id='CTh1s'></legend><bdo id='CTh1s'><pre id='CTh1s'><center id='CTh1s'></center></pre></bdo></b><th id='CTh1s'></th></span></q></dt></tr></i><div id='CTh1s'><tfoot id='CTh1s'></tfoot><dl id='CTh1s'><fieldset id='CTh1s'></fieldset></dl></div>
                    <tfoot id='CTh1s'></tfoot>
                    <legend id='CTh1s'><style id='CTh1s'><dir id='CTh1s'><q id='CTh1s'></q></dir></style></legend>
                      <bdo id='CTh1s'></bdo><ul id='CTh1s'></ul>
                        <tbody id='CTh1s'></tbody>
                    • <small id='CTh1s'></small><noframes id='CTh1s'>