gridによる横並び

今回はgridによる横並びです｡flexを使う方法もありますので､そちらも興味があれば､ご覧ください｡

• 浪人のサムライ
  flexによる､ボックスの横並び｡短い工数で実現できます｡

HTML

HTMLは以下になります｡

<div class="wrapper">



<div class="box">

<p>コンテンツ</p>

</div>


<aside>

<p>サイドバー</p>

</aside>

</div>

wrapperで2つのボックスを囲んでいます｡何てことはない､HTMLですね｡スマホでみると､1カラムレイアウトになりまます｡CSSは以下になります｡

.box{

background: green;

}



aside{

background: aqua;

}



@media (min-width: 768px) {


main{

max-width: 48%;



.wrapper{

display: grid;

grid-template-columns: 1fr 1fr;

}
}
}

わかりやすいように色を付けているのと､mainはコンテンツ全体のwidthを指定しています｡これは任意です｡

メディアクエリで､768px以上になると､横並びにしています｡僕の場合､モバイルファーストでHTMLとCSSを書きます｡768px以上でレイアウトを変えることが多いです｡その方が楽ですね｡そんな感じがします｡

さいごに

できるだけ､無駄なコードを書かないようにしています｡解説サイトを見ると､どれが必要なのか､わかりづらい｡なので､できるだけ簡単にまとめて書いています｡

今後もそうしたい｡