イメージコンテナを使用すると、上の写真からわかるように、私はグリッドシステムを実現しようとしている他のグリッドコンテナ

Question

こんにちは、

に下を揃えるありません。最初のグリッドは3画像、2番目のグリッドは1列目、3番目のグリッドは2番目のグリッドの右側に浮かぶ大きな画像です。あなたは私のポートフォリオにこの写真を見ることができます。http://www.irwinlitvak.com

私は31.33％の幅を持つ3つの画像を持ち、1番目と2番目の画像は3,0005％の余白を持っています。

次のグリッド（グリッド2）では、2つの画像が1つの列に残っており、（グリッド2/3）は65.556％の幅で右に浮かんでいます。

大きな画像の上部と下部がグリッドの高さ全体を占めるようにしたいので、大きな画像の下部が自己破壊ボックスと揃うようにします。ここで

HTML & CSSです：あなたは何ができるか

.projects-grid { 
 
    margin: 100px auto 0; 
 
    width: 90%; 
 
} 
 

 
.projects-grid .title { 
 
    margin-bottom: 20px; 
 
    text-align: center; 
 
} 
 

 
.projects-grid h1 { 
 
    display: inline-block; 
 
    font-family: "Montserrat"; 
 
} 
 

 
.grid-1 { 
 
    margin-bottom: 4%; 
 
} 
 

 
.grid-1-of-3 { 
 
    position: relative; 
 
    width: 31.33%; 
 
    float: left; 
 
    overflow: hidden; 
 
} 
 

 
.grid-2-of-3 { 
 
    position: relative; 
 
    width: 65.556%; 
 
    float: right; 
 
} 
 

 
.grid-1-of-3:first-child, 
 
.grid-1-of-3:nth-child(2) { 
 
    margin-right: 3.005%; 
 
} 
 

 
.grid-3 { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 33%; 
 
    margin-bottom: 60px; 
 
    vertical-align: bottom; 
 
} 
 

 
.grid-5 { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 20%; 
 
    margin-bottom: 60px; 
 
    vertical-align: bottom; 
 
} 
 

 
.box-1 { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.grid-1-of-3:first-child { 
 
    margin-left: 0; 
 
} 
 

 
.grid-1-of-3:last-child { 
 
    margin-right: 0; 
 
} 
 

 
.big-box { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.grid-2 { 
 
    width: 31.33%; 
 
    float: left; 
 
} 
 

 
.grid-2 .box-cont { 
 
    width: 100%; 
 
} 
 

 
.grid-2 .box-cont:first-child { 
 
    margin-bottom: 4%; 
 
} 
 

 
.grid-2 .box-cont { 
 
    position: relative; 
 
}

<section class="projects-grid clearfix"> 
 

 
    <div class="row title"> 
 
    <h2>Projects</h2> 
 
    </div> 
 

 
    <div class="grid-1 clearfix"> 
 
    <div class="grid-1-of-3"> 
 

 
     <div class="box-1"> 
 
     <a href=""> 
 
      <img class="bdgt-app" src="assets/budget-app-x-ps.jpg" alt="budget-app pic"> 
 
     </a> 
 
     <a href="https://budget-app-x.herokuapp.com/" target="_blank"> 
 
      <div class="box-overlay"> 
 
      <div class="text-overlay"> 
 
       <h3>Budget-App-X</h3> 
 
       <p>Manage your incomes and expenses in a fun and easy app.</p> 
 
      </div> 
 
      </div> 
 
     </a> 
 
     </div> 
 

 
     <h3> 
 
     <a href="https://budget-app-x.herokuapp.com/" target="_blank">Budget-App-X</a> 
 
     </h3> 
 
    </div> 
 

 
    <div class="grid-1-of-3"> 
 
     <div class="box-1"> 
 
     <a href=""> 
 
      <img src="/assets/dice-game-x-ps.jpg" alt="dice-game"> 
 
     </a> 
 
     <a href="https://dice-game-x.herokuapp.com/" target="_blank"> 
 
      <div class="box-overlay"> 
 
      <div class="text-overlay"> 
 
       <h3>Dice-Game</h3> 
 
       <p>Roll the dice. Test your luck and see who racks the most points.</p> 
 
      </div> 
 
      </div> 
 
     </a> 
 
     </div> 
 
     <h3> 
 
     <a href="https://dice-game-x.herokuapp.com/" target="_blank">Dice-Game</a> 
 
     </h3> 
 

 
    </div> 
 

 
    <div class="grid-1-of-3"> 
 
     <div class="box-1"> 
 
     <a href=""> 
 
      <img src="/assets/pomodoro-timer-x-ps.jpg" alt="pomodoro-app-timer"> 
 
     </a> 
 
     <a href="http://pomodoro-app-timer.herokuapp.com" target="_blank"> 
 
      <div class="box-overlay"> 
 
      <div class="text-overlay"> 
 
       <h3>Pomodoro-Timer</h3> 
 
       <p>A quick and easy solution to being productive. Set the time and get things done.</p> 
 
      </div> 
 
      </div> 
 
     </a> 
 
     </div> 
 

 
     <h3> 
 
     <a href="http://pomodoro-app-timer.herokuapp.com" target="_blank">Pomodoro-Timer</a> 
 
     </h3> 
 
    </div> 
 
    </div> 
 

 
    <div class="grid-2 clearfix"> 
 

 
    <div class="box-cont"> 
 
     <div class="box-1"> 
 
     <a href=""> 
 
      <img src="/assets/cucumberme-x-ps.jpg" alt="cucumber me"> 
 
     </a> 
 
     <a href="http://www.cucumberme.com" target="_blank"> 
 
      <div class="box-overlay"> 
 
      <div class="text-overlay"> 
 
       <h3>CucumberMe</h3> 
 
       <p>CucumberMe is your way of anonymously sending cucumbers to a friend, ex or anyone you want.<br><br> Go and send one today! </p> 
 
      </div> 
 
      </div> 
 
     </a> 
 
     </div> 
 

 
     <h3> 
 
     <a href="http://www.cucumberme.com" target="_blank">CucumberMe</a> 
 
     </h3> 
 

 
    </div> 
 

 
    <div class="box-cont"> 
 
     <div class="box-1"> 
 
     <a href="#"> 
 
      <img src="/assets/self-destruct-x-ps.jpg" alt="to do list"> 
 
     </a> 
 
     <a href="http://todos-irwin.herokuapp.com/" target="_blank"> 
 
      <div class="box-overlay"> 
 
      <div class="text-overlay"> 
 
       <h3>Self Destructing To-Do-List</h3> 
 
       <p>A to-do-list that will delete itself within 10 seconds. How many chores can you list within that time? </p> 
 
      </div> 
 
      </div> 
 
     </a> 
 
     </div> 
 
     <h3> 
 
     <a href="http://todos-irwin.herokuapp.com/" target="_blank"> 
 
           Self Destructing To-Do-List 
 
          </a> 
 
     </h3> 
 
    </div> 
 
    </div> 
 

 
    <div class="grid-2-of-3 clearfix"> 
 
    <div class="box-cont"> 
 
     <div class="big-box"> 
 
     <a href="#"> 
 
      <img src="/assets/omnifood-x-ps.jpg" alt="omnifood"> 
 
     </a> 
 
     <a href="http://con.staging.thegateny.net/con/Omnifood/v1/" target="_blank"> 
 
      <div class="box-overlay big-overlay"> 
 
      <div class="text-overlay"> 
 
       <h3>Omnifood</h3> 
 
       <p>My version of the food app Blue Apron. Take a look! </p> 
 
      </div> 
 
      </div> 
 
     </a> 
 
     </div> 
 

 
     <h3> 
 
     <a href="http://con.staging.thegateny.net/con/Omnifood/v1/" target="_blank"> 
 
           Omnifood 
 
          </a> 
 
     </h3> 
 
    </div> 
 
    </div> 
 
</section>

Answer 1

私は以下のスニペットに示してあります。あなたは、同じ高さにしたいすべてのdivのためのコンテナを持っています。これは、あなたが設定した高さを与えます。次に、左の項目をコンテナ（height: 100%）に与え、適切な項目（height: 100%）のdivを作成します。
これにより、左側にアイテムのコンテナがあるので、それぞれ50％とすることができます。また、左側にコンテナと同じ高さのアイテムがあります。

画像をdivに合わせるには、background-size: coverなどを使用します。 height:100%; width: autoは反応性のある画像でも機能します。

希望します。

.outer { 
 
background: blue; 
 
width: 600px; 
 
height: 200px; 
 
} 
 

 
.leftwrap { 
 
width: 30%; 
 
float: left; 
 
height: 100%; 
 
} 
 

 
.left1 { 
 
background: purple; 
 
width: 100%; 
 
height: 50%; 
 
} 
 

 
.left2 { 
 
background: orange; 
 
width: 100%; 
 
height: 50%; 
 
} 
 

 
.right { 
 
background: teal; 
 
height: 100%; 
 
width: 70%; 
 
float: left; 
 
} 
 

 
/** New code **/ 
 
.image { 
 
    height: 80%; 
 
    width: auto; 
 
    border: 1px solid black; 
 
} 
 

 
.imagetext { 
 
    color: white; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
} 
 

 
.left { 
 
    box-sizing: border-box; 
 
    padding-bottom: 30px; 
 
}

<div class='outer'> 
 
    <div class='leftwrap'> 
 
    <div class='left left1'> 
 
     <div class="image">My image here</div> 
 
     <div class="imagetext">Some text</div> 
 
    </div> 
 
    <div class='left left2'> 
 
     <div class="image">My image here</div> 
 
     <div class="imagetext">Some text</div> 
 
    </div> 
 
    </div> 
 
    <div class='right'>3</div> 
 
</div>