Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

CSS Grid・Flexboxの 最近の進化とミライ

CSS Grid・Flexboxの 最近の進化とミライ

DIST.38 「CSSな夜」で発表した内容です。
https://dist.connpass.com/event/266728/

Twitter
https://twitter.com/tonkotsuboy_com

tonkotsuboy_com

December 09, 2022
Tweet

More Decks by tonkotsuboy_com

Other Decks in Programming

Transcript

  1. ΤϦΞ໊Λࢦఆͯ͠഑ஔ .container { display: grid; grid-template: "main-visual logo" 70% "main-visual

    title" 30% / 50% 50%; } ߦྻͷߦྻΛͭ͘ΓɺͦΕͧΕ໊લΛαΠζΛઃఆ͢Δͱ͍͏ࢦఆ
  2. ΤϦΞ໊Λࢦఆͯ͠഑ஔ .container { display: grid; grid-template: "main-visual logo" 70% "main-visual

    title" 30% / 50% 50%; } .main-visual { grid-area: main-visual; } .logo { grid-area: logo; } .title { grid-area: title; }
  3. ߦྻΛ܁Γฦͨ͠Γɺ伱ؒΛͭ͘Δ .container { display: grid; grid-template: repeat(3, 100px) / repeat(3,

    100px); gap: 24px; } ߦྻͷQYͷαΠζͷࢦఆɺ ߦྻؒͷ伱ؒΛQYʹ͢Δࢦఆ
  4. ੲͷ΍Γ͔ͨʢ4ʙ7ߦʣ .container { position: relative; } .container .box { position:

    absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; }
  5. ੲɿཁૉؒʹmarginΛࢦఆ͍ͯͨ͠ .container { display: flex; } .container > a {

    margin-left: 20px; margin-right: 20px; } .container > a:first-of-type { margin-left: 0; } .container > a:last-of-type { margin-right: 0; }
  6. $44Ͱදݱ͢Δͱʜ /* 親⾏列 */ .container { display: grid; } /*

    ⼦⾏列 */ .container .item { display: grid; grid-template-rows: subgrid; grid-row: span 4; }
  7. $44Ͱදݱ͢Δͱʜ /* 親⾏列 */ .container { display: grid; } /*

    ⼦⾏列 */ .container .item { display: grid; grid-template-rows: subgrid; grid-row: span 4; }
  8. ݱঢ়ͷCSSͰ΋ٕज़తʹ͸Մೳ .container { /* カラム数成り⾏き、基本的に300pxの横幅 */ columns: auto 300px; /*

    列間の隙間 */ column-gap: 24px; } .item { /* ⾏間の隙間 */ margin-bottom: 24px; } ը૾Λԣํ޲ʹฒ΂ΒΕͳ͍ɺ伱ؒΛ਌ͱࢠʹࢦఆ͢ΔͳͲ੍໿͕ଟ͍