CSSのflex, gridの基礎をわかりやすく学べるアプリ紹介
Flex, Gridのどちらも同じ作者様のものです
だいぶ昔にFlexの方をやってFlexのコツを掴みました。
それからいままでFlexでだいたい何でも作れちゃってたのでGridは放置してたのですが、いよいよ学ばなければとなりまして…
探したら同じ作者さんのGrid版があったので楽しくやりましたw
おまけ: VScodeに登録したスニペット
{
/**
* flex 関連
*/
"my 'flex'": {
"scope": "css,scss",
"prefix": "my flex",
"body": [
"display: flex;",
"gap: $1rem;",
"flex-direction: column;$2",
"justify-content: center;",
"align-items: center;",
]
},
/**
* grid 関連
*/
"my 'grid-row-column'": {
"scope": "css,scss",
"prefix": "my grid-row-column",
"body": [
"grid-column: $1/span $2;",
"grid-row: $3/$4;",
]
},
"my 'grid-area'": {
"scope": "css,scss",
"prefix": "my grid-area",
"body": [
"grid-area: ${1: row-start} /span ${2: column-start} / repeat(${3: row-end}) / ${4: column-end};",
]
},
"my 'grid-template'": {
"scope": "css,scss",
"prefix": "my grid-template",
"body": [
"grid-template: ${1: row} / ${2: column}",
]
},
}css.code-snippets
よく使う構文(span とか repeat() とか)については、何度も調べ直すのが面倒なのでsnippetに組み込んでしまうことが多いです。慣れたら削除。