{"id":177032,"date":"2014-07-30T16:44:51","date_gmt":"2014-07-30T23:44:51","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=177032"},"modified":"2022-10-18T06:19:09","modified_gmt":"2022-10-18T13:19:09","slug":"grid-row-column","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-row-column\/","title":{"rendered":"grid-row \/ grid-column"},"content":{"rendered":"\n<p>The <code>grid-row<\/code> and <code>grid-column<\/code> properties define which row or column an element will be displayed on.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  grid-row: 1 \/ 2;\n  grid-column: 3 \/ -1;\n}<\/code><\/pre>\n\n\n\n<p>Here&#8217;s an explicit 3 \u00d7 3 grid where these properties are used to place grid items onto it in specific places:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oNXyaJE\" src=\"\/\/codepen.io\/anon\/embed\/oNXyaJE?height=450&amp;theme-id=1&amp;slug-hash=oNXyaJE&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oNXyaJE\" title=\"CodePen Embed oNXyaJE\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-grid\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">57<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">52<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"IE - \"><span class=\"caniuse-agents-version version\">11*<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">16<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">10.1<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">10.3<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul><li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/\">The Complete Guide to Grid<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-rows-columns\/\">grid-template-columns \/ grid-template-rows<\/a><\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The grid-row and grid-column properties define which row or column an element will be displayed on. Here&#8217;s an explicit 3 \u00d7 3 grid where these properties are used to place grid items onto it in specific places: Browser support More information The Complete Guide to Grid grid-template-columns \/ grid-template-rows<\/p>\n","protected":false},"author":37733,"featured_media":0,"parent":13923,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[686],"acf":[],"jetpack-related-posts":[{"id":343682,"url":"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/","url_meta":{"origin":177032,"position":0},"title":"A Complete Guide to CSS Grid","date":"May 12, 2021","format":false,"excerpt":"Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.","rel":"","context":"In \"grid\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/grid-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":374225,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-column\/","url_meta":{"origin":177032,"position":1},"title":"grid-column","date":"October 17, 2022","format":false,"excerpt":"The grid-column CSS property is a shorthand that specifies the column grid lines where a grid item starts and ends in a grid layout in one declaration. .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); } .grid-item:nth-child(2) { grid-column: 3 \/ 5; \/* Starts on the third column line and ends\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":375172,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-area\/","url_meta":{"origin":177032,"position":2},"title":"grid-area","date":"November 22, 2022","format":false,"excerpt":"The\u00a0grid-area\u00a0CSS property is a shorthand that specifies the location and the size of a grid item in a grid layout by setting the value of\u00a0grid-row-start,\u00a0grid-column-start,\u00a0grid-row-end\u00a0and\u00a0grid-column-end\u00a0in one declaration. .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } .grid-item:nth-child(2) { grid-area: 2 \/ 4 \/ 4 \/ 6; \/* is equivalent to:\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":367122,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-auto-flow\/","url_meta":{"origin":177032,"position":3},"title":"grid-auto-flow","date":"July 27, 2022","format":false,"excerpt":"The grid-auto-flow CSS property is part of the CSS Grid Layout specification that allows us to control the flow of grid items that are automatically placed when they are not explicitly positioned with any grid-placement properties. .grid-container { display: grid; grid-template-columns: repeat(8, 50px); grid-auto-flow: dense; } That example creates a\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":374484,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-row\/","url_meta":{"origin":177032,"position":4},"title":"grid-row","date":"October 26, 2022","format":false,"excerpt":"The grid-row CSS property is a shorthand that specifies the row grid lines where a grid item starts and ends in a grid layout, and does it in a single declaration. .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); } .grid-item:nth-child(2) { grid-row: 2 \/ 4; \/* Starts on the second\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":373247,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-row-end\/","url_meta":{"origin":177032,"position":5},"title":"grid-row-end","date":"September 21, 2022","format":false,"excerpt":"The grid-row-end CSS property is part of the CSS Grid Layout specification, used to indicate the row grid line where a grid item ends in a grid layout. This property \u2014 among other line-based placement grid properties \u2014 controls the size of a grid item and where it sits on\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/177032"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/37733"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=177032"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/177032\/revisions"}],"predecessor-version":[{"id":374479,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/177032\/revisions\/374479"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13923"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=177032"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=177032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}