{"id":8493,"date":"2024-04-29T09:45:32","date_gmt":"2024-04-29T08:45:32","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=8493"},"modified":"2024-04-29T09:57:20","modified_gmt":"2024-04-29T08:57:20","slug":"css-grid-table-layout-example","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/css-grid-table-layout-example\/","title":{"rendered":"CSS Grid table layout example"},"content":{"rendered":"\n<p>Source: <a href=\"https:\/\/stackoverflow.com\/a\/63018503\/1052129\">https:\/\/stackoverflow.com\/a\/63018503\/1052129<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"156\" src=\"https:\/\/solidt.eu\/site\/wp-content\/uploads\/2024\/04\/image-3-1024x156.png\" alt=\"\" class=\"wp-image-8494\" srcset=\"https:\/\/solidt.eu\/site\/wp-content\/uploads\/2024\/04\/image-3-1024x156.png 1024w, https:\/\/solidt.eu\/site\/wp-content\/uploads\/2024\/04\/image-3-300x46.png 300w, https:\/\/solidt.eu\/site\/wp-content\/uploads\/2024\/04\/image-3-768x117.png 768w, https:\/\/solidt.eu\/site\/wp-content\/uploads\/2024\/04\/image-3-1536x234.png 1536w, https:\/\/solidt.eu\/site\/wp-content\/uploads\/2024\/04\/image-3.png 1571w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"php\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>CSS Grid table layout example&lt;\/title>\n    &lt;link rel=\"style\" src=\"index.css\" type=\"css\" \/>\n    &lt;style>\n        .parent {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n        }\n\n        .row {\n            display: grid;\n            grid-column: 1 \/ -1;\n            grid-template-columns: subgrid;\n        }\n\n        .col {\n            border: 1px #000 solid;\n        }\n    &lt;\/style>\n&lt;\/head>\n\n&lt;body>\n    &lt;h1>CSS Grid table layout example&lt;\/h1>\n\n    &lt;div class=\"parent\">\n        &lt;div class=\"row\">\n            &lt;div class=\"col\">1A&lt;\/div>\n            &lt;div class=\"col\">1B&lt;\/div>\n            &lt;div class=\"col\">1C&lt;\/div>\n        &lt;\/div>\n        &lt;div class=\"row\">\n            &lt;div class=\"col\">2A&lt;\/div>\n            &lt;div class=\"col\">2B&lt;br \/>ABCDEDFSJISDOFUDIOSFUIODSUFIOUDOSIFUIODSUFIOUIODSF&lt;\/div>\n            &lt;div class=\"col\">2C&lt;\/div>\n        &lt;\/div>\n        &lt;div class=\"row\">\n            &lt;div class=\"col\">3A&lt;\/div>\n            &lt;div class=\"col\">3B&lt;\/div>\n            &lt;div class=\"col\">3C&lt;\/div>\n        &lt;\/div>\n    &lt;\/div>\n\n&lt;\/body>\n\n&lt;\/html><\/pre><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Source: https:\/\/stackoverflow.com\/a\/63018503\/1052129<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-8493","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/8493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=8493"}],"version-history":[{"count":2,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/8493\/revisions"}],"predecessor-version":[{"id":8496,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/8493\/revisions\/8496"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=8493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=8493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=8493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}