CSS 卡片应该与网格大小相同，但列弄乱了

Question

我以为我正在使用网格系统来保持所有卡片的高度相同，但我以某种方式阅读，因为我将卡片排成一排，其中的列与高度混淆。

我怎么变成这样了。有什么好的文章可以帮我整理一下吗？或关键词来突出我自己的想法？

我猜这也是我无法获取背景的原因：url 也无法显示，我必须在 div 图片部分添加 BR 才能让图片显示.

  <div class="row">
    <div class="column">

  <div class="card">
    <div class="card-image"><br><BR><BR><BR><BR><BR></div>
        <div class="card-text">
            <span class="date">
                <script>  
                    var d1 = new Date("01/02/2022");   
                    var d2 = new Date();   
                    var diff = d2.getTime() - d1.getTime();   
              
                    var daydiff = diff / (1000 * 60 * 60 * 24);   
                    var newnumber = parseInt(daydiff,10);

                    if( newnumber == "0") {
                    document.write("Today" );   
        
                    } else if (newnumber == "1"){
                    document.write("Yesterday" ); 
                    }
                    else {
                    document.write("Posted " + newnumber + " days ago</b>" ); }
                </script>  


          </span>
      <h2>Uploaded Pictures</h2>
      <p>2021 Hoilday pictures in Photo Album</p>
    </div>
    
  </div><!--END CARD 1-->
  </div><!--END COLUMN1-->

 
 <div class="column">
    <div class="card">
    <div class="card-image"><br><BR><BR><BR><BR><BR></div>
    <div class="card-text">
      <span class="date">
          
        <script>  
            var ad1 = new Date("12/30/2021");   
            var ad2 = new Date();   
            var adiff = ad2.getTime() - ad1.getTime();   
      
            var adaydiff = adiff / (1000 * 60 * 60 * 24);   
            var anewnumber = parseInt(adaydiff,10);

            if( anewnumber == "0") {
            document.write("Today" );   

            } else if (anewnumber == "1"){
            document.write("Yesterday" ); 
            }
            else {
            document.write("Posted " + anewnumber + " days ago</b>" ); }
        </script>  
        
      </span>
      <h2>Post Two</h2>
      <p>Lorem ipsum dolor sit amet consectetur, </p>
    </div>
    
  </div><!--END CARD 2-->
  </div><!--END COLUMN2-->


<div class="column">

<div class="card">
    <div class="card-image"></div>
    <div class="card-text">
      <span class="date">
          
        <script>  
            var bd1 = new Date("12/15/2021");   
            var bd2 = new Date();   
            var bdiff = bd2.getTime() - bd1.getTime();   
      
            var bdaydiff = bdiff / (1000 * 60 * 60 * 24);   
            var bnewnumber = parseInt(bdaydiff,10);

            if( bnewnumber == "0") {
            document.write("Today" );   

            } else if (bnewnumber == "1"){
            document.write("Yesterday" ); 
            }
            else {
            document.write("Posted " + bnewnumber + " days ago</b>" ); }
        </script>  

      </span>
      <h2>Post Three</h2>
      <p>Lorem ipsum dolor sit amet conse</p>
    </div>
    
    </div><!--END CARD 3-->
 </div><!--END COLUMN 3-->

 </div> <!--END ROW-->


 /* Float four columns side by side */
 .column {
 float: left;
 width: 25%;
 padding: 0 10px;
 position: sticky;
 display: flex;
 justify-content: center;
 flex-direction: column;
 /*align-items: stretch;*/
 /*align-items: center;*/
 }

 /* Remove extra left and right margins, due to padding in columns */
 .row {margin: 0 -5px;}

 /* Clear floats after the columns */
 .row:after {
 content: "";
 display: table;
 clear: both;
 }


 .card {
 /* 
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;*/
 height:100%;
 width: 250px;
 grid-template-columns: 300px;
 grid-template-rows: 210px 210px;
 grid-template-areas: "image" "text";
 border-radius: 18px;
 background: white;
 box-shadow: 5px 5px 15px rgba(0,0,0,0.9);

 text-align: center;
 margin-left: 120px;
 padding-bottom: 25px;
 }

 .card-image {
 grid-area: image;
 background: url("../img/updates/2021HolidayParty.jpg") blue;
 border-top-left-radius: 15px;
 border-top-right-radius: 15px;
 background-size: contain;
 }

.card-text {
grid-area: text;
margin: 25px;

}
.card-text .date {
color: rgb(255, 7, 110);
font-size:13px;
}
.card-text p {
 color: grey;
 font-size:15px;
 font-weight: 300;
}
.card-text h2 {
  color: rgb(32, 11, 126);
 margin-top:0px;
 font-size:28px;
}

Answer 1

您可以简单地使用 height 而不是使用 break 标签。将高度添加到 .card-text 和 .card-image

.card-text 会像

.card-text {
    grid-area: text;
    margin: 25px;
    height: 122px;
}

.card-image 会像

.card-image {
    grid-area: image;
    background: url("../img/updates/2021HolidayParty.jpg") blue;
    background-size: auto;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-size: contain;
    height: 132px;
}

CSS 卡片应该与网格大小相同，但列弄乱了

CSS cards are supposed to be the same size with grid but column is messing it up

css

datagridviewcolumn

css-grid