グリッドレイアウトを用いて、複数のボックスのボタンの位置を一番下に合わせて揃えたい。( css grid 中身 下 ボタン位置 )

Question

前提・実現したいこと

グリッドレイアウトを用いて、複数のボックスのボタンの位置を一番下に合わせて揃えたい。

発生している問題・エラーメッセージ

ボタンの一を最初のBoxのように一番したで揃えたい。

該当のソースコード

<div class="grid-content">
        <div class="box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <button>ボタン</button>
        </div>
        <div class="box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <button>ボタン</button>
        </div>
        <div class="box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
            <button>ボタン</button>
        </div>
        <div class="box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <button>ボタン</button>
        </div>
        <div class="box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <button>ボタン</button>
        </div>
        <div class="box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
            <button>ボタン</button>
        </div>
    </div>

.grid-content {
    display              : grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows   : 1fr 1fr 1fr;
    gap: 10px;
}

.box{
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.3));
}

.box button{
    /* height    :20%;   */
    /* margin-top: auto; */
}

試したこと

buttonの要素に margin-top: auto; を指定(コメントアウトしてあります)

Answer 1

FlexBoxを使えばどうでしょうか。

.box{
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.3));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items:flex-start;
}

あるいは、position: absolute; を使ってもいいですね。

.box{
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.3));
    position: relative;
    padding-bottom: 1em;
}

.box button{
     position: absolute;
     bottom: 0;
}

Comments

[IjIj]

hatena19さんありがとうございます。どちらも素晴らしいやり方です。大変勉強になりました。