{"id":1265,"date":"2024-07-31T14:41:53","date_gmt":"2024-07-31T18:41:53","guid":{"rendered":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/?p=1265"},"modified":"2024-07-31T14:47:07","modified_gmt":"2024-07-31T18:47:07","slug":"grid-with-columns-of-equal-width","status":"publish","type":"post","link":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/2024\/grid-with-columns-of-equal-width\/","title":{"rendered":"Grid With Columns of Equal Width"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">What:<\/h3>\n\n\n\n<p>I had a CSS grid with 5 columns that were supposed to all be the same width, except that one of them was bigger and I couldn&#8217;t figure out why.<\/p>\n\n\n\n<p>The CSS I was using for the items in my grid was <code>grid-template-columns: repeat(5, 1fr)<\/code> and it clearly wasn&#8217;t working. Why not? And what to do about it?<\/p>\n\n\n\n<!--more-->\n\n\n\n<h3 class=\"wp-block-heading\">How:<\/h3>\n\n\n\n<p>Looking it up I found out that <code>repeat(5, 1fr)<\/code> is about distributing the <em>available <\/em>space, so that when a word or an image in one of the columns is wider than you had hoped the column would be, the space left over is divided into 4 smaller columns.<\/p>\n\n\n\n<p>In my case a word in one of the columns was too long, so I implemented <code>word-wrap: break-word<\/code> for the text but I also changed the <code>grid-template-columns<\/code> declaration.<\/p>\n\n\n\n<pre title=\"Solution to create columns of the same width in a grid\" class=\"wp-block-code has-central-palette-5-color has-central-palette-7-background-color has-text-color has-background has-link-color wp-elements-937e4a6fd27762d77706c8b631642518\"><code lang=\"css\" class=\"language-css\">.mygrid-container .mygrid-items {\n\tgrid-template-columns: repeat(5, minmax(0,1fr));\n}<\/code><\/pre>\n\n\n\n<p>This means that the maximum width a column can be is 1fr and this solved the problem for me.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Where:<\/h3>\n\n\n\n<p><a href=\"https:\/\/stackoverflow.com\/a\/61240964\" target=\"_blank\" rel=\"noreferrer noopener\">Stack Overflow<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Thoughts:<\/h3>\n\n\n\n<p>The answer at Stack Overflow is worth looking at. It explains everything clearly and succinctly and also mentions that this method can cause content to overflow the container.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What: I had a CSS grid with 5 columns that were supposed to all be the same width, except that one of them was bigger and I couldn&#8217;t figure out why. The CSS I was using for the items in my grid was grid-template-columns: repeat(5, 1fr) and it clearly wasn&#8217;t working. Why not? And what &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"Grid With Columns of Equal Width\" class=\"read-more button\" href=\"https:\/\/www.blindemanwebsites.com\/today-i-learned\/2024\/grid-with-columns-of-equal-width\/#more-1265\" aria-label=\"Read more about Grid With Columns of Equal Width\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[17,228,129,35],"class_list":["post-1265","post","type-post","status-publish","format-standard","hentry","category-new-things","tag-css","tag-grid-layout","tag-multic-column","tag-stack-overflow","infinite-scroll-item"],"_links":{"self":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/1265","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/comments?post=1265"}],"version-history":[{"count":3,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/1265\/revisions"}],"predecessor-version":[{"id":1275,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/1265\/revisions\/1275"}],"wp:attachment":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/media?parent=1265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/categories?post=1265"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/tags?post=1265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}