{"id":33932,"date":"2017-07-07T15:01:12","date_gmt":"2017-07-07T07:01:12","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=33932"},"modified":"2018-04-09T16:50:56","modified_gmt":"2018-04-09T08:50:56","slug":"moving-css-grid-items","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/moving-css-grid-items\/","title":{"rendered":"Moving Items in CSS Grid Layout [Guide]"},"content":{"rendered":"

Using the CSS Grid Layout Module<\/strong> in web design becomes more and more feasible as more browsers begin to support it<\/a><\/strong>. While creating layouts filling in grid cells, there might come a moment, though, when you want to achieve more complicated things.<\/p>\n

For instance, you might want to slightly move around<\/strong> some of the grid items stuck in their grid areas. You also might want to move them out of the grid container<\/strong> (overflow), or over each other<\/strong> (overlap), or just\u2026 to some empty space around.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tIntroduction to the CSS Grid Layout Module<\/a>\n\t\t\t\t<\/p>\n

So, in this post, I\u2019ll show you how you can move, order, overflow, overlap, and size grid items<\/strong> when you use the CSS Grid Layout Module<\/a>.<\/p>\n

Create a CSS grid<\/h2>\n

First, let\u2019s create a simple CSS grid with one row and three columns<\/strong>.<\/p>\n

\"Grid<\/figure>\n

In the HTML, we create a bunch of divs where the grid container contains the three grid items<\/strong>.<\/p>\n

\r\n<div class='grid-container'>\r\n  <div class='grid-left'><\/div>\r\n  <div class='grid-center'><\/div>\r\n  <div class='grid-right'><\/div>\r\n<\/div>\r\n<\/pre>\n
In the CSS, the grid container has the display: grid;<\/code> property<\/strong> and the grid items have grid-area<\/code><\/a><\/strong> that identifies the names of the grid item areas.<\/p>\n
We also add the grid-template-areas<\/code><\/a> property<\/strong> to the grid container, in which the grid area names are used to assign the grid areas to the grid cells they represent<\/strong>.<\/p>\n
All columns take the size of one fraction<\/a> (fr<\/code>)<\/strong> of the container width, ensuring the containment of the grid items.<\/p>\n
\r\n.grid-container {\r\n  display: grid;\r\n  grid-template-areas: 'left center right';\r\n  grid-template-columns: repeat(3, 1fr);\r\n  grid-template-rows: 80px;\r\n  grid-gap: 5px;\r\n  width: 360px;\r\n  background-color: magenta;\r\n}\r\n.grid-left {\r\n  grid-area: left;\r\n}\r\n.grid-center {\r\n  grid-area: center;\r\n}\r\n.grid-right {\r\n  grid-area: right;\r\n}\r\n.grid-container div {\r\n  background-color: lightgreen;\r\n}\r\n<\/pre>\n
Overflow grid items<\/h2>\n
You can make a grid item overflow its grid container<\/strong> if it\u2019s necessary for a layout. To achieve the overflow effect, you just need to use a different column size<\/strong>:<\/p>\n
\r\n.grid-container {\r\n  display: grid;\r\n  grid-template-areas: 'left center right';\r\n  grid-template-columns: repeat(3, 150px);\r\n  grid-gap: 5px;\r\n}\r\n<\/pre>\n
The sum of the column- and gap-size<\/strong> is bigger than the width of the container<\/strong>, which causes the grid items overflow their container.<\/p>\n
\"Grid<\/figure>\n
Overlap grid items<\/h2>\n
A grid item can overlap<\/strong> (fully or partially cover) another grid item<\/strong> in the following cases:<\/p>\n
    \n
  1. It\u2019s set to span across (and over) the cell(s) of another grid item.<\/li>\n
  2. Its size has been increased, causing it to overlap with the nearby grid item.<\/li>\n
  3. It\u2019s moved over on top of another grid item.<\/li>\n<\/ol>\n
    We\u2019ll discuss the second and third cases later, in the \u201cSizing\u201d and \u201cMoving\u201d sections.<\/p>\n
    First, let\u2019s see the first case when a grid item spans across another one<\/strong>.<\/p>\n
    \"CSS<\/figure>\n
    The grid item at the center has spanned over the left one<\/strong>, so only two items are visible on the screen.<\/p>\n
    \r\n.grid-center {\r\n  grid-area: center;\r\n  grid-column: 1 \/ 3;\r\n}\r\n<\/pre>\n
    The grid-column<\/code><\/a> and grid-row<\/code><\/a> properties assign grid lines<\/strong> between which a column or row needs to fit.<\/p>\n
    On the below diagram, you can see how the grid-column: 1 \/ 3<\/code> CSS rule works: the center column spans between the grid lines 1 and 3<\/strong>. As a result, the center column overlaps the left one.<\/p>\n
    \"Grid<\/figure>\n
    Move grid items<\/h2>\n
    By moving, I mean moving the items slightly around<\/strong>. If you completely want to relocate an item into another grid cell\/area I recommend you update the grid creation code.<\/p>\n
    Moving around grid items is simple. Just use the margin<\/code>, the transform<\/code>, or the position:relative;<\/code> properties<\/strong>. See below how the items are moved using those properties.<\/p>\n
    \"Grid<\/figure>\n
    The center and right grid items can be moved (as shown above) in the following ways:<\/p>\n
    1. Using margin<\/code><\/h3>\n
    Negative margins increase the dimensions of grid items, while positive margins trim them. By using a combination of both, you can slighlty move the grid items around.<\/p>\n
    \r\n.grid-center {\r\n  grid-area: center;\r\n  margin-left: -10px;\r\n  margin-right: 10px;\r\n  margin-top: -10px;\r\n  margin-bottom: 10px;\r\n}\r\n.grid-right {\r\n  grid-area: right;\r\n  margin-left: 10px;\r\n  margin-right: -10px;\r\n  margin-top: -10px;\r\n  margin-bottom: 10px;\r\n}\r\n<\/pre>\n
    2. Using transform<\/code><\/h3>\n
    The translate()<\/code><\/a> CSS function moves an element along the x- and y-axes<\/strong>. Using it together with the transform<\/code> property allows you to change the position of a grid item.<\/p>\n
    \r\n.grid-center {\r\n  grid-area: center;\r\n  transform: translate(-10px, -10px);\r\n}\r\n.grid-right {\r\n  grid-area: right;\r\n  transform: translate(10px, -10px);\r\n}\r\n<\/pre>\n
    3. Using position<\/code><\/h3>\n
    Using the position: relative;<\/code> rule with the specified top<\/code>, bottom<\/code>, left<\/code>, and right<\/code> properties can be used for moving around grid items as well.<\/p>\n
    \r\n.grid-center {\r\n  grid-area:  center;\r\n  position: relative;\r\n  bottom: 10px;\r\n  right: 10px;\r\n}\r\n.grid-right {\r\n  grid-area: right;\r\n  position: relative;\r\n  bottom: 10px;\r\n  left: 10px;\r\n}\r\n<\/pre>\n
    Order grid items<\/h2>\n
    Grid items are rendered on the screen in the order they appear in the HTML source code<\/strong>.<\/p>\n
    In the previous section, when the center item was moved left, it was placed on top of the left item by the browser. This happened because in the HTML, <div class='grid-center'><\/code> comes after <div class='grid-left'><\/code>, hence the center item is rendered after (and over)<\/strong> the left one.<\/p>\n
    \"Grid<\/figure>\n
    However, we can change the order grid items<\/strong> using the z-index<\/code><\/a> or the order<\/code><\/a> CSS properties.<\/p>\n
    \"Grid<\/figure>\n
    Using the z-index: 1;<\/code> rule, the left grid item got a higher stacking context<\/strong>.<\/p>\n
    .\r\ngrid-left{\r\n  grid-area: left;\r\n  z-index: 1;\r\n}\r\n<\/pre>\n
    As in the CSS Grid Layout module, changing the element order in HTML doesn\u2019t affect the grid layout<\/strong>, you can also put <div class='grid-center'><\/code> before <div class='grid-left'><\/code> in the HTML. Only do this, though, if the updated HTML code doesn\u2019t harm accessibility.<\/p>\n
    Size grid items<\/h2>\n
    If you use auto-sized rows or columns for a grid item (using auto<\/code>, fr<\/code>, gr<\/code> units), it will shrink to make space for its neighbouring item that has grown in size only if<\/em> said item was not sized by transform<\/code> or a negative margin<\/strong>.<\/p>\n
    Remember, in our sample grid, all three columns take one fraction (fr<\/code>) of the grid container. Take a look at how all three items look like after the left one is resized in two different ways.<\/p>\n
    1. Sized with width<\/code> and height<\/code><\/h3>\n
    Here, we change the size of the left item using the width<\/code> and height<\/code> properties<\/strong>. As a result, it stays inside the grid container.<\/p>\n
    \"Grid<\/figure>\n
    \r\n.grid-left {\r\n  grid-area: left;\r\n  width: 200px;\r\n  height: 90px;\r\n}\r\n<\/pre>\n
    2. Sized with transform<\/code><\/h3>\n
    Here, we change the size of the left item using the transform<\/code> property<\/strong>. As a result, it overflows the container and the grid gap also disappears.<\/p>\n
    \"Grid<\/figure>\n
    \r\n.grid-left {\r\n  grid-area: left;\r\n  transform: scalex(1.8);\r\n}\r\n<\/pre>\n
    \n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tHow to Integrate Simple CSS Grid Layouts into WordPress<\/a>\n\t\t\t\t<\/p>","protected":false},"excerpt":{"rendered":"
    Using the CSS Grid Layout Module in web design becomes more and more feasible as more browsers begin to support it. While creating layouts filling in grid cells, there might come a moment, though, when you want to achieve more complicated things. For instance, you might want to slightly move around some of the grid…<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,4319,4501],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nMoving Items in CSS Grid Layout [Guide] - Hongkiat<\/title>\n<meta name=\"description\" content=\"Using the CSS Grid Layout Module in web design becomes more and more feasible as more browsers begin to support it. While creating layouts filling in grid\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/moving-css-grid-items\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Moving Items in CSS Grid Layout [Guide]\" \/>\n<meta property=\"og:description\" content=\"Using the CSS Grid Layout Module in web design becomes more and more feasible as more browsers begin to support it. While creating layouts filling in grid\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/moving-css-grid-items\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2017-07-07T07:01:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-04-09T08:50:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/moving-css-grid-items\/grid-without-overflow.jpg\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/moving-css-grid-items\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/moving-css-grid-items\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"Moving Items in CSS Grid Layout [Guide]\",\"datePublished\":\"2017-07-07T07:01:12+00:00\",\"dateModified\":\"2018-04-09T08:50:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/moving-css-grid-items\\\/\"},\"wordCount\":842,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/moving-css-grid-items\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/moving-css-grid-items\\\/grid-without-overflow.jpg\",\"keywords\":[\"CSS\",\"CSS Grid Layout\",\"CSS Tutorials\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/moving-css-grid-items\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/moving-css-grid-items\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/moving-css-grid-items\\\/\",\"name\":\"Moving Items in CSS Grid Layout [Guide] - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/moving-css-grid-items\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/moving-css-grid-items\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/moving-css-grid-items\\\/grid-without-overflow.jpg\",\"datePublished\":\"2017-07-07T07:01:12+00:00\",\"dateModified\":\"2018-04-09T08:50:56+00:00\",\"description\":\"Using the CSS Grid Layout Module in web design becomes more and more feasible as more browsers begin to support it. While creating layouts filling in grid\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/moving-css-grid-items\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/moving-css-grid-items\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/moving-css-grid-items\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/moving-css-grid-items\\\/grid-without-overflow.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/moving-css-grid-items\\\/grid-without-overflow.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/moving-css-grid-items\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Moving Items in CSS Grid Layout [Guide]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Moving Items in CSS Grid Layout [Guide] - Hongkiat","description":"Using the CSS Grid Layout Module in web design becomes more and more feasible as more browsers begin to support it. While creating layouts filling in grid","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/moving-css-grid-items\/","og_locale":"en_US","og_type":"article","og_title":"Moving Items in CSS Grid Layout [Guide]","og_description":"Using the CSS Grid Layout Module in web design becomes more and more feasible as more browsers begin to support it. While creating layouts filling in grid","og_url":"https:\/\/www.hongkiat.com\/blog\/moving-css-grid-items\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-07-07T07:01:12+00:00","article_modified_time":"2018-04-09T08:50:56+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/moving-css-grid-items\/grid-without-overflow.jpg","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/moving-css-grid-items\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/moving-css-grid-items\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"Moving Items in CSS Grid Layout [Guide]","datePublished":"2017-07-07T07:01:12+00:00","dateModified":"2018-04-09T08:50:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/moving-css-grid-items\/"},"wordCount":842,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/moving-css-grid-items\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/moving-css-grid-items\/grid-without-overflow.jpg","keywords":["CSS","CSS Grid Layout","CSS Tutorials"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/moving-css-grid-items\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/moving-css-grid-items\/","url":"https:\/\/www.hongkiat.com\/blog\/moving-css-grid-items\/","name":"Moving Items in CSS Grid Layout [Guide] - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/moving-css-grid-items\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/moving-css-grid-items\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/moving-css-grid-items\/grid-without-overflow.jpg","datePublished":"2017-07-07T07:01:12+00:00","dateModified":"2018-04-09T08:50:56+00:00","description":"Using the CSS Grid Layout Module in web design becomes more and more feasible as more browsers begin to support it. While creating layouts filling in grid","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/moving-css-grid-items\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/moving-css-grid-items\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/moving-css-grid-items\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/moving-css-grid-items\/grid-without-overflow.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/moving-css-grid-items\/grid-without-overflow.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/moving-css-grid-items\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Moving Items in CSS Grid Layout [Guide]"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-8Pi","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/33932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=33932"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/33932\/revisions"}],"predecessor-version":[{"id":42158,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/33932\/revisions\/42158"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=33932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=33932"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=33932"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=33932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}