{"id":917,"date":"2021-06-05T16:33:23","date_gmt":"2021-06-05T07:33:23","guid":{"rendered":"http:\/\/www.agile-software.site\/?p=917"},"modified":"2023-01-02T16:16:05","modified_gmt":"2023-01-02T07:16:05","slug":"tailwindcss-%e3%83%81%e3%83%bc%e3%83%88%e3%82%b7%e3%83%bc%e3%83%88%e8%a7%a3%e8%aa%acgrid","status":"publish","type":"post","link":"https:\/\/agile-software.net\/?p=917","title":{"rendered":"tailwindcss \u30c1\u30fc\u30c8\u30b7\u30fc\u30c8\u89e3\u8aac(Grid)"},"content":{"rendered":"\n

Grid<\/h2>\n\n\n\n

grid-template-columns<\/h3>\n\n\n\n
Class<\/th>Properties<\/th><\/tr><\/thead>
grid-cols-1<\/td>grid-template-columns: repeat(1, minmax(0, 1fr));<\/td><\/tr>
grid-cols-2<\/td>grid-template-columns: repeat(2, minmax(0, 1fr));<\/td><\/tr>
grid-cols-3<\/td>grid-template-columns: repeat(3, minmax(0, 1fr));<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

repeat()<\/h4>\n\n\n\n
epeat(\u7e70\u308a\u8fd4\u3057\u56de\u6570, \u5404\u30c8\u30e9\u30c3\u30af\u306e\u5024);<\/code><\/pre><\/div>\n\n\n\n
minmax()<\/h4>\n\n\n\n
minmax(\u6700\u5c0f\u5024, \u6700\u5927\u5024);<\/code><\/pre><\/div>\n\n\n\n
fr\u3092\u4f7f\u3046\u3068\u67a0\u306b\u5408\u308f\u305b\u305f\u30b0\u30ea\u30c3\u30c9\u306e\u5927\u304d\u3055\u3092\u81ea\u52d5\u7684\u306b\u8abf\u6574\u3057\u3066\u304f\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
grid-template-columns: 1fr 2fr 1fr;<\/code><\/pre><\/div>\n\n\n\n
2fr\u306e\u7b87\u6240\u3067\u306f1fr2\u3064\u5206\u306e\u30b0\u30ea\u30c3\u30c9\u30b5\u30a4\u30ba\u3067\u914d\u7f6e\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
\uff13\u3064\u306e\u30b3\u30e9\u30e0\u306b\u5206\u3051\u308b\u5834\u5408<\/h5>\n\n\n\n
<div class="grid grid-cols-3 gap-4">\n  <div>1<\/div>\n  <!-- ... -->\n  <div>9<\/div>\n<\/div><\/code><\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/i><\/div>
\n
\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u306b\u3059\u308b\u65b9\u6cd5<\/p>\n<\/div><\/div>\n\n\n\n
\u30b9\u30de\u30db\u3067\u306f1\u3064\u306e\u30b3\u30e9\u30e0\u3067\u8868\u793a\u3057\u3066medium screen\u4ee5\u4e0a(\u30bf\u30d6\u30ec\u30c3\u30c8\u3084\u30c7\u30b9\u30af\u30c8\u30c3\u30d7)\u306e\u30b5\u30a4\u30ba\u3067\u306f\uff13\u3064\u306e\u30b3\u30e9\u30e0\u306b\u5206\u3051\u308b<\/p>\n\n\n\n
<div class="grid grid-cols-1 md:grid-cols-6">\n  <!-- ... -->\n<\/div><\/code><\/pre><\/div>\n\n\n\n
grid-column,start\/end<\/h3>\n\n\n\n
\u6a2a\u5e45\u4e00\u676f\u304c6\uff0e<\/p>\n\n\n\n
<\/i><\/div>
\n
\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u306b\u3059\u308b\u65b9\u6cd5<\/p>\n<\/div><\/div>\n\n\n\n
sm<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
md<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<div class="grid grid-cols-6 gap-4">\n  <div class="col-span-6 sm:col-span-4 md:col-span-3 lg:col-span-5 xl:col-span-2..."><\/div>\n  <div class="col-span-3 sm:col-span-2 md:col-span-3 lg:col-span-1 xl:col-span-4..."><\/div>\n  <div class="col-span-3 sm:col-span-2 md:col-span-3 lg:col-span-4 xl:col-span-2..."><\/div>\n  <div class="col-span-6 sm:col-span-4 md:col-span-3 lg:col-span-2 xl:col-span-4..."><\/div>\n<\/div><\/code><\/pre><\/div>\n\n\n\n
grid-template-rows<\/h3>\n\n\n\n
grid-row,start\/end<\/h3>\n\n\n\n
grid-auto-flow<\/h3>\n\n\n\n
grid-auto-columns<\/h3>\n\n\n\n
grid-auto-rows<\/h3>\n\n\n\n
gap<\/h3>\n\n\n\n
\u5217\u3068\u884c\u306e\u611f\u899a\u3092\u8a2d\u5b9a\u3059\u308b<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
gap-4\u306f1rem<\/p>\n\n\n\n
<div class="grid gap-4 grid-cols-2">\n  <div>1<\/div>\n  <div>2<\/div>\n  <div>3<\/div>\n  <div>4<\/div>\n<\/div><\/code><\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u7e26\u306e\u9593\u9694\u304cgap-4,\u6a2a\u306e\u9593\u9694\u304cgap-8<\/p>\n\n\n\n
<div class="grid gap-x-8 gap-y-4 grid-cols-3">\n  <div>1<\/div>\n  <div>2<\/div>\n  <div>3<\/div>\n  <div>4<\/div>\n  <div>5<\/div>\n  <div>6<\/div>\n<\/div><\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
Grid grid-template-columns Class Properties grid-cols-1 grid-template-columns: repeat(1, minmax(0, 1fr)); grid<\/p>\n","protected":false},"author":1,"featured_media":918,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jin_ogp_image_url":"","_jin_last_featured_id":0,"footnotes":""},"categories":[25],"tags":[],"class_list":["post-917","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tailwindcss"],"_links":{"self":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/917","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=917"}],"version-history":[{"count":2,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/917\/revisions"}],"predecessor-version":[{"id":2453,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/917\/revisions\/2453"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/media\/918"}],"wp:attachment":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=917"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=917"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}