CSS 網格項定位，其中項 1 位於網格列的下端，項 2 位於其列的中心

Question

我正在嘗試使用 css 網格來實現這一點：

主要部分中有兩列的網格。 左列中的項目是一個圖像，必須貼在網格的底部，而卡片將在第二列中。 卡片將居中對齊。

這是我的 HTML/CSS 代碼：

 .mainbody { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(1, 2fr); text-align: center; grid-gap: 5px; padding-top: 75px; } .left { float: left; overflow: hidden; height: 600px; position: relative; } .left-bottom { position: absolute; bottom: 0px; } .right { float: left; width: 50%; overflow: hidden; }

 <div class="container mainbody"> <div class="left"> <div class="left-bottom"> <img class="image-car" src="..."> </div> </div> <div class="container"> <div class="card"> //card text </div> </div> </div>

這段代碼完成了這項工作，但它不適用於媒體查詢。 我是初學者，讓我知道我需要做哪些改變，或者我應該遵循什么方法來實現我的目標。

Answer 1

您可以縮短 CSS 代碼並使用網格單元格內的margin將內容推向任何邊緣或中心。

在使用網格或 flex 構建布局時，恕我直言float 或 absolute 不應該有任何用處。

例子：

 .mainbody { display: grid; grid-template-columns: 1fr 1fr; text-align: center; grid-gap: 5px; } .left { margin-top:auto; }

 <div class="container mainbody"> <div class="left"> <div class="left-bottom"> <img class="image-car" src="http://dummyimage.com/100x150&text=1"> </div> </div> <div class="container"> <div class="card"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> </div> </div> </div>

可使用的代碼筆： https ://codepen.io/gc-nomade/pen/wvGXKKG

從你的評論：

那么我怎樣才能讓一個網格項目粘在底部而另一個在中心呢？ 另外，是的，我想要上面鏈接中的 grid_layout 之類的東西

可能的方法

 * { margin: auto; } .mainbody { display: grid; grid-template-columns: 1fr 1fr; text-align: center; grid-gap: 5px; min-height: 100vh; background: #bee } .container .container { display: grid; /* just a single cel to use layout properties */ } .left { margin: auto auto 0; } .card { margin: auto 0 auto; }

 <div class="container mainbody"> <div class="left"> <div class="left-bottom"> <img class="image-car" src="http://dummyimage.com/100x150&text=1"> </div> </div> <div class="container"> <div class="card"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> </div> </div> </div>