zenet-tech https://blog.hatena.ne.jp/zenet-tech/ Zenet Tech Blog https://media.zenet-web.co.jp/ html CSS イントロダクション こんにちは。システム事業部の五十島です。 前回の記事に引き続き CSS Grid Layoutのご紹介です。 前回はただ単に並べただけで、float: leftl; float: right とあまり大差がないように感じたと思いますが、 今回は任意の位置に表示する手法を説明していきます。 前回のおさらい 前回までは横を3等分に分割する設定を行いました。 各要素は1格子に収まる形なので、縦は自動的に2段になります。 前回のhtmlのdivタグにclass属性を付与するところから始まります。 ソースコード gird.html <div id="grid-main"> <div class="gri… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fmedia.zenet-web.co.jp%2Fentry%2F2018%2F03%2F01%2F115427" title="CSS Grid Layoutのすすめ（パート2） - Zenet Tech Blog" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/z/zenet-tech/20210317/20210317110957.jpg Hatena Blog https://hatena.blog 2018-03-01 11:54:27 rich https://media.zenet-web.co.jp/entry/2018/03/01/115427 1.0 100%