【長期インターン】gridについて

2025/01/27

日々の活動日記エンジニアインターン

畑　尚吾

こんにちは、株式会社ガーディアンWEBプログラマー長期インターン生の畑尚吾です。

CSSを学ぶ上で避けては通れない、gridレイアウトについて話していきたいと思います。

本日、ウィジェット編集を主に行っておりましたが、flexについては前の活動日記に書かせていただき、大体の理解はできました.

しかし、displayで要素に対して、gridを指定することがあり、躓いたので理解を深めるために書かせていただきます。

gridの使用法

gridプロパティは、要素に対してdisplay:gridで指定します。

指定された親要素の下にある子要素に対して、作用してグリッドアイテムへと変化する

grid-template-columnsの使用法

grid-template-columnsプロパティでグリッド上にcolumns(列)がグリッドトラックとして定義されます。

pxで幅を指定することができますが、利用可能なスペースに応じて空間の比率を新しい単位のfrで指定することができます。例として

grid-template-columns:1fr 1fr 1fr;

と指定することで、幅を3等分されたグリッドトラックが作成されます。

振り返り

今回は、ヘッダーの分割をするために使用しました。

flexプロパティを使っていて、どうしても距離感が近くなってしまっていたものをgridで修正することができたので、覚えるためにも書かせていただきました。。

他のサイズの指定方法もあるので、次回以降も使用できるように知識を蓄えていきます。

メンバー紹介：https://guardion.jpn.com/member/

インターン生の活動日記：https://guardian.jpn.com/intern/

＊COMMENT＊

河原田　ゆきえ
更新日：2025-01-27 17:24
＊コメント＊

土曜日に発信した通り、インターン生の活動日記はエントリーを検討してる学生からめっちゃ見られてます👀✨!!しょうやんも見たでしょ？その時に、今回のように学ぶ内容について具体的に書いてある記事も良いけど、勤務の様子がリアルに伝わる記事って、すごくイメージできるじゃない？なのでせっかく出社してるんだし、ランチや服装、一緒に働く仲間が分かるような写真撮ってアップして欲しいな～♡
土曜日に発信した通り、インターン生の活動日記はエントリーを検討してる学生からめっちゃ見られてます👀✨!!しょうやんも見たでしょ？

その時に、今回のように学ぶ内容について具体的に書いてある記事も良いけど、勤務の様子がリアルに伝わる記事って、すごくイメージできるじゃない？

なのでせっかく出社してるんだし、ランチや服装、一緒に働く仲間が分かるような写真撮ってアップして欲しいな～♡
＊コメント＊
下川　春樹
更新日：2025-01-27 19:41
＊コメント＊

お疲れ様です。 grid、便利そうなのですが、ついflexで解決してしまいあまり使った事がありません。シンメトリー、アシンメトリーのコンテンツにもモッテコイですので、いつか勉強がてら使ってみようと思います。
お疲れ様です。

grid、便利そうなのですが、ついflexで解決してしまいあまり使った事がありません。シンメトリー、アシンメトリーのコンテンツにもモッテコイですので、いつか勉強がてら使ってみようと思います。
＊コメント＊
紀井　斎
更新日：2025-01-27 20:14
＊コメント＊

コーディングって、数学の問題を解いているみたいで楽しいよね
コーディングって、数学の問題を解いているみたいで楽しいよね
＊コメント＊
木村　りえい
更新日：2025-01-28 08:14
＊コメント＊

gridを使う場面が段々と増えてきた気がします。徐々に使い慣れていきたいですね！
gridを使う場面が段々と増えてきた気がします。
徐々に使い慣れていきたいですね！
＊コメント＊
池田　みはな
更新日：2025-01-28 08:27
＊コメント＊

おつかれさまです。実務での試行錯誤を通してgridの理解を深めていらっしゃるのが伝わってきて素敵だなと思いました！引き続き応援しています！
おつかれさまです。実務での試行錯誤を通してgridの理解を深めていらっしゃるのが伝わってきて素敵だなと思いました！引き続き応援しています！
＊コメント＊
則岡　えり
更新日：2025-01-28 09:42
＊コメント＊

お疲れ様です。私も少し前にgridを覚えたので使っていますが、iPhoneでよく崩れて苦戦しております。お互い頑張りましょう！
お疲れ様です。
私も少し前にgridを覚えたので使っていますが、iPhoneでよく崩れて苦戦しております。
お互い頑張りましょう！
＊コメント＊
菅谷　将司
更新日：2025-01-28 13:10
＊コメント＊

おつかれさまです！ gridはきれいに並べたはずなのに、子要素の余白が想定外に影響してグチャッとなったりすることがありました汗お互いスキルアップ頑張りましょう！
おつかれさまです！
gridはきれいに並べたはずなのに、子要素の余白が想定外に影響してグチャッとなったりすることがありました汗
お互いスキルアップ頑張りましょう！
＊コメント＊
可信　なみ
更新日：2025-01-28 16:57
＊コメント＊

上手に使おうと思うと難しいですよね💦私もまだまだ勉強中なので、しっかり理解できるようお互い頑張りましょう！
上手に使おうと思うと難しいですよね💦私もまだまだ勉強中なので、しっかり理解できるようお互い頑張りましょう！
＊コメント＊
宮腰あやか　
更新日：2025-01-28 18:01
＊コメント＊

お疲れ様です。gridを使いこなせると対応の幅が広がりそうですよね！一緒に頑張りましょう。
お疲れ様です。gridを使いこなせると対応の幅が広がりそうですよね！一緒に頑張りましょう。
＊コメント＊
岡田　のりこ
更新日：2025-01-29 09:22
＊コメント＊

gridについて分かりやすく纏めてくださりありがとうございます。自分はgridをほとんど使えていないのですが、gridの記述を見ると、なるほど！便利だ！と思うことがあります。学んだことをどんどん実務に活かしていけるようお互い頑張りましょう！
gridについて分かりやすく纏めてくださりありがとうございます。
自分はgridをほとんど使えていないのですが、gridの記述を見ると、なるほど！便利だ！と思うことがあります。
学んだことをどんどん実務に活かしていけるようお互い頑張りましょう！
＊コメント＊