![\"\"](\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/03\/3x3grid.png\")
<\/p>\nIn order to create a game of tic-tac-toe using React.js, I first needed to figure out how to create a 3×3 grid of squares using HTML and CSS. Turns out, with CSS grid it is fairly straightforward.<\/p>\n
<\/p>\n
All we need is three CSS classes:<\/p>\n
Here is what the HTML looks like:<\/p>\n
<div class=\"container\">\r\n <div class=\"grid\">\r\n <div class=\"cell\" id=\"1\">1<\/div>\r\n <div class=\"cell\" id=\"2\">2<\/div>\r\n <div class=\"cell\" id=\"3\">3<\/div>\r\n <div class=\"cell\" id=\"4\">4<\/div>\r\n <div class=\"cell\" id=\"5\">5<\/div>\r\n <div class=\"cell\" id=\"6\">6<\/div>\r\n <div class=\"cell\" id=\"7\">7<\/div>\r\n <div class=\"cell\" id=\"8\">8<\/div>\r\n <div class=\"cell\" id=\"9\">9<\/div>\r\n <\/div>\r\n<\/div><\/pre>\nHere is the CSS:<\/p>\n
.container {\r\n background: black;\r\n display: inline-block;\r\n border: 5px solid black;\r\n}\r\n\r\n.grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 80px);\r\n grid-template-rows: repeat(3, 80px);\r\n grid-gap: 5px;\r\n}\r\n\r\n.cell {\r\n \/* center the cell content *\/\r\n justify-content: center;\r\n align-items: center;\r\n display: flex;\r\n font-family: Arial;\r\n font-size: 3rem;\r\n font-weight: bold;\r\n background: white;\r\n}<\/pre>\nImportant CSS details that make this work:<\/p>\n
display: inline-block;<\/code>in the container class.<\/li>\ndisplay: grid;<\/code>in the grid class.<\/li>\ngrid-template-columns: repeat(3, 80px);<\/code>in the grid class sets up the columns.<\/li>\ngrid-template-rows: repeat(3, 80px);<\/code>in the grid class sets up the rows.<\/li>\ngrid-gap: 5px;<\/code>in the grid class sets up gaps (borders) between the cells.<\/li>\ndisplay: flex;<\/code>in the cell class.<\/li>\n<\/ul>\nIf any one of the above details are missing, then the grid won’t work.<\/p>\n
Here is what the grid looks like on Codepen:<\/p>\n
\nSee the Pen CSS 3\u00d73 square grid flexbox solution by Chris Nielsen (@Chris_Nielsen) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"
In order to create a game of tic-tac-toe using React.js, I first needed to figure out how to create a 3×3 grid of squares using HTML and CSS. Turns out, with CSS grid it is fairly straightforward. All we need is three CSS classes: container: This is the highest level div that will contain the … Continue reading HTML & CSS: How to create a square grid using CSS grid<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[104],"tags":[10,140,105],"class_list":["post-1661","post","type-post","status-publish","format-standard","hentry","category-html-css","tag-css","tag-grid","tag-html"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1661","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=1661"}],"version-history":[{"count":8,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1661\/revisions"}],"predecessor-version":[{"id":2567,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1661\/revisions\/2567"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1661"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1661"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}