この段はFLEXBOX
基本、文字数に合わせて自動で拡縮される。最大文字の箱が親要素の高さ。
子要素にfrex：１などと指定する。子要素を同じクラスにしておくと便利。また、レスポンシブ用に左右の並び順を変更できる。
色は匂へど散りぬるをわが世誰ぞつねならむうゐの奥山けふ越えて浅き夢見じ酔ひもせず
色は匂へど散りぬるをわが世誰ぞつねならむ、うゐの奥山けふ越えて浅き夢見じ酔ひもせず。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん4950
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎら??ひかる草の波。
こちらの段はGRID
2018年現在、IE11が不対応（CSSベンダー接頭辞をつけても）。しかしなぜかEdgeは対応、Chrome Safari Firefoxも対応している。こちらも、自動で拡縮される。
CSSでは、横がカラムで縦がロウ。分数のように表記されるのは、第何横線から第何横線までという条里制表記。地図ではrowが条、京都も奈良も同じ、columnが札幌なら東何丁目、大阪なら筋。縦横を統一的にデザインするのにはいいと思う。Wordpressのような、すでに決まっているものにはFrexboxのほうがよさそう。まあ、WPにはページビルダーのようなプラグインがあるが。
また、flex gridいずれも親要素の中の全ての子要素に適用されるため、例外を作るのが難しい。
iiloxILOX130ｉｌｏｘＩＬＯＸ１３０〇●?○－-ー?ー-?一×???×
祇辻飴葛蛸鯖鰯噌庖箸着?鴎喜??頬叱??吉??娯?高髙萌萠塚塚著?面?遜謎餅餠侠??蝉躯?呑?痩?硬吸頃睡異挨雪満無斎発備奔溺空湿吹冥岸家脈蚕印蓋聴聽達非祭存孝射芽夢帰班均麗蔑考値望勢競頑災芝更伎八公雲環泰談医継園耳邦街餌四配換湾次姿牙韓茨栃衣去玄人家北芝史入八子手?了?心雨戸??無風比仰糸絲示?衣主言?年又文月条保奥公角骨切改酒陸穴木来來糸?環令外淫恣煎嘲溺蔽葛嗅僅餌箋填賭惧稽詮捗剥喩選普無女文延進手子也?
〇●◎?◆▲???????ゞ?カ゜? ???①??????????
あめ「天」つち（地）ほし(星)そら{空}「『やま』山」みね[峰]たに<谷>くも｛雲｝きり〔霧〕むろ【室】こけ‘苔’ひと“人”うへ?上-さる＝猿＝ゆわ～硫黄~すゑ＿末＿かは?河?いぬ?犬?
タヰニイナツム
色は匂へど散りぬるをわが世誰ぞつねならむうゐの奥山けふ越えて浅き夢見じ酔ひもせず
色は匂へど散りぬるをわが世誰ぞつねならむ、うゐの奥山けふ越えて浅き夢見じ酔ひもせず。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん4950
画像には幅１００％を指定しておかないと、広がりすぎたりする。