<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5f6e7806-7a2c-47fb-867b-54742c37b10e/透明画像10001000.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5f6e7806-7a2c-47fb-867b-54742c37b10e/透明画像10001000.png" width="40px" /> ファストス

</aside>

課題

下記LPをGridで実際に作成してみる

<aside> 💡 実施するファイルについて

`html / grid.html`・`css / grid.css`ファイルへ実装する

`grid-layout`ブランチを作成し実施

</aside>

### 目的

レイアウトデザインの一つであるGridについて学ぶことで実践でも使える技術を身につける

### 実装する項目

- seminarセクション
- galleryセクション

<aside>
💡 **下記条件を満たしていること**

- インデントが崩れていないこと
- 中身の連続するコンテンツは全てGridで調整する
- レスポンシブ対応がされていること
    - PC（1440px）
    - TABLET（IPad）
    - SP（iPhoneX）
- レイアウト崩れがないか
※ どのように実装すればランダムなレイアウトを実装することができるかを考えていきましょう！画像通り完璧に真似する必要はないです。

</aside>

下記をコードを既存のファイルにコピーし実装

- grid.html
- grid.css
- FVで利用する画像

**完成画面**

- PC
- TABLET
- SP