WePuri


ログイン

パスワードを忘れた方はこちらから

無料登録

グリットレイアウト

現在、コーディングに主流になっているのはグリッドレイアウトです。

このレッスンではcssのgridプロパティの使い方をご紹介させていただきます。

サンプルコード

<ul class="list">
    <li></li>
    <li class="list_02"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
.list{
    display: grid;
    grid-template-columns: repeat(4 , 1fr);
    gap:10px;
}
.list li{
    padding: 20px;
    background: #138caa;
}
.list .list_02{
    background: red;
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}
display: grid;gridを定義する親要素
grid-template-columns: repeat(4 , 1fr);要素の幅を決める親要素
gap:10px;要素と要素の隙間の幅を指定親要素
grid-column: 1 / 2;子要素の配置を指定(列)子要素
grid-row: 1 / 3;子要素の配置を指定(行)子要素