{"id":139703,"date":"2017-12-19T11:00:13","date_gmt":"2017-12-19T17:00:13","guid":{"rendered":"https:\/\/getflywheel.com\/?p=18300"},"modified":"2023-11-13T13:21:18","modified_gmt":"2023-11-13T19:21:18","slug":"css-grid-layouts-how-to","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/css-grid-layouts-how-to\/","title":{"rendered":"How to Create a Simple Layout with CSS Grid Layouts"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">If you\u2019ve ever dabbled in print design, you know where the idea of grid layouts originated from. A grid is a precise measurement tool used to position design elements on a page. This idea is often used on the web to make content organized and uniform, making for an improved viewing experience for your users.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/08\/Screen-Shot-2017-12-19-at-9.59.07-AM-1024x716.png\" alt=\"example of a CSS grid layout\" class=\"wp-image-25318\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">When the practice of web design was new, layouts were pretty simple. Header, sidebar, content area, and footer. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As the web has evolved, our layouts have become more complex and we have a lot more to contend with as web designers. We often need numerous content regions, responsive design, multiple page layout template designs, amongst many other things. And to implement the design and get it to display correctly, floats and positioning are required. Floats sound simple, but these can sometimes be tricky to work with.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Luckily, the grid provides an easier way to design and display web content. It\u2019s an awesome time to be a designer because CSS Grid Layouts are quickly gaining traction. It may feel like grids have been a new idea in web design in recent years, but believe it or not, CSS Grid Layouts have been in the works for many years. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Browser support for them happened very quickly, so now they can help ease some of the frustration around positioning that designers have had to deal with for many years.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019s finally time to break into the grid and explore the new design possibilities!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Grid Support<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">It all depends on the browsers you need to support, but there\u2019s a pretty good chance that you do not have to worry about \u201cflag mode\u201d when using CSS Grids. You can always visit the Can I Use documentation to double check, but support for CSS Grids has dramatically increased and many designers are able to use it in production, which is cause for celebration!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Grid Layout Basics<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">By utilizing CSS, grid layouts will help define content areas on your web page. There is a relatively new set of properties defined in the <a href=\"https:\/\/drafts.csswg.org\/css-grid-1\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Grid Layout Specifications<\/a>. This is a great resource to reference when learning more about this new way of layout design. CSS Grid Layouts help to simplify things and make creating layouts easier. Think of the grid as a structure where measurements can be defined.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/08\/css-grid-layouts-grid-diagram.jpg\" alt=\"Diagram of a CSS grid layout\" class=\"wp-image-18365\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Parts of the Grid<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Lines<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this case, there are five vertical lines and three horizontal lines. Lines are given numbers starting from one. Vertical lines are shown from left to right in this example, but this depends on the writing direction. Because this shows reading from left to right, if it is from right to left, things will be reversed. Lines can be given names (optional), which helps with referencing them in CSS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Tracks<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A track is the space between two parallel lines. In the diagram, there are four vertical tracks and two horizontal tracks. There is a great dual effort between lines and tracks. Lines are a great way to reference where the content starts and stops. Tracks are where the content actually goes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Cells<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cells are found where a horizontal and a vertical track meet. There are eight cells in the diagram.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Areas<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cells come into play when specifying areas. An area is a rectangular shape that can span a number of cells. Like lines, areas can be optionally named. There are a few labels included in the diagram: \u201cA,\u201d \u201cB,\u201d and \u201cC.\u201d<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creating a Grid Layout<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">It can be helpful to sketch things out before starting your layout. There\u2019s no substitute for good old graph paper.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/08\/grid-working-updated.jpg\" alt=\"example of a css grid layout sketched on paper and how it translates into a usable css grid\" class=\"wp-image-25312\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>HTML for the grid<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;html]\n\n&amp;amp;amp;lt;div class=\"container\"&amp;amp;amp;gt;\n  &amp;amp;amp;lt;div class=\"grid header\"&amp;amp;amp;gt;Header&amp;amp;amp;lt;\/div&amp;amp;amp;gt;\n  &amp;amp;amp;lt;div class=\"grid sidebar\"&amp;amp;amp;gt;Sidebar&amp;amp;amp;lt;\/div&amp;amp;amp;gt;\n  &amp;amp;amp;lt;div class=\"grid content\"&amp;amp;amp;gt;Main Content&amp;amp;amp;lt;\/div&amp;amp;amp;gt;\n  &amp;amp;amp;lt;div class=\"grid extra\"&amp;amp;amp;gt;Extra Content&amp;amp;amp;lt;\/div&amp;amp;amp;gt;\n  &amp;amp;amp;lt;div class=\"grid footer\"&amp;amp;amp;gt;Footer&amp;amp;amp;lt;\/div&amp;amp;amp;gt;\n&amp;amp;amp;lt;\/div&amp;amp;amp;gt;\n\n&#091;\/html]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The container is very important. Within the container are the different content blocks for the website. The order of the grid items within the container does not matter. Next, we\u2019ll use CSS to place them in our layout.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>CSS styles<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After you are done with the HTML markup, the most important declaration is done in the CSS. Within the container, you need to apply <code>display:grid<\/code> or <code>display:inline-grid<\/code>. Use <code>display:grid<\/code> if you would like a block-level grid. Use <code>display:inline-grid<\/code> for inline-level grids. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;css]\n\n.container {\n  \tdisplay: grid;\n  \tgrid-template-columns: 1fr 3fr;\n        grid-column-gap: 10px;\n        grid-row-gap: 15px;\n}\n\n.grid {\n  background-color: #444;\n  color: #fff;\n  padding: 25px;\n  font-size: 3rem;\n}\n\n&#091;\/css]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>grid-template-columns<\/code> and <code>grid-template-rows<\/code> properties are used to specify the width of the rows and columns. The <code>grid-template-columns<\/code> have been set as 1fr and 3fr. This is where the grid is taking shape with the fractional units. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With these values, it is apparent there are two columns and they are not equal width. The column set to 3fr is three times wider than the other. This explains how the sidebar appears more narrow than the content area.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are responsive customizations that can be made, but using the fractional units is a great first step. Spacing between areas can be controlled with the <code>grid-column-gamp<\/code> and the <code>grid-row-gap<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Things look pretty tight, but with a few more specifications, things will take shape.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This example starts with placing the header, but elements can be placed in whatever order works best for you. If you want to start with the footer, that will work, too.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/08\/css-grid-layouts-grid-example-start.png\" alt=\"css-grid-layouts-grid-example-start\nAn example of a starting css layout with a header, a footer, a space for content, and a space titled extra content\" class=\"wp-image-18368\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s start with the header, which goes from column line 1 to column line 4 and row line 1 to row line 2. The CSS will look like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;css]\n\n.header {\n  grid-column-start: 1;\n  grid-column-end: 3;\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n&#091;\/css]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">You may notice that the sidebar is squished and we can\u2019t see it very much. We will need to do a little rearranging. In this layout, referencing the lines to get the placement will help with the arrangement. The lines act as the guidelines. The header is located between the line at row one and the line at row two. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For the sidebar, it will start at row three and end at line six. The header row ended at two, so this will be placed right under it. To view the example, see the project on <a href=\"https:\/\/codepen.io\/abbeyjfitzgerald\/pen\/LePpyE\" target=\"_blank\" rel=\"noopener noreferrer\">Codepen<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We use <code>grid-column-start<\/code> to specify the starting vertical line for an element. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this case, it would be set to three. The <code>grid-column-end<\/code> indicates the ending vertical line for an element. In this case, this property would be equal to four. Other row values will also be set this same way. The placement of the sidebar is there, it is just covered by the content area.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;css]\n\n.sidebar {\n  grid-column-start: 1;\n  grid-column-end: 2;\n  grid-row-start: 2;\n  grid-row-end: 4;\n  background: #a0c263;\n}\n\n&#091;\/css]<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/08\/css-grid-layouts-grid-exmple-start-02.png\" alt=\"That example layout from above, but with each of the elements spaced more appropriately\" class=\"wp-image-18369\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The main content starts at column three and ends at column four. The top of the sidebar and content area are even, so they both have a <code>grid-row-start<\/code> of three. You may be wondering how the content and sidebar are much taller. By putting a height on the container, in this case 400px, this is now taller than the other elements.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;css]\n\n.content {\n  grid-column-start: 2;\n  grid-column-end: 3;\n  grid-row-start: 2;\n  grid-row-end: 3;\n  background: #f5c531;\n  height: 400px;\n}\n\n&#091;\/css]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The last two content areas are the extra content area and the footer.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;css]\n\n.extra {\n  grid-column-start: 2;\n  grid-column-end: 3;\n  grid-row-start: 3;\n  grid-row-end: 4;\n  background: #898989;\n}\n\n.footer {\n  grid-column-start: 1;\n  grid-column-end: 3;\n  grid-row-start: 3;\n  grid-row-end: 4;\n  background: #FFA500;\n}  \n\n&#091;\/css]<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/08\/css-grid-layouts-grid-example-start-final.png\" alt=\"A finalized version of the css layout in which all the elements are in place and make sense\" class=\"wp-image-18367\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">End and start declarations can be written more efficiently. You may see <code>grid-column-start: 1;<\/code> and <code>grid-column-end: 3;<\/code> written in shorthand. This would look like <code>grid-column: 1 \/ 3;<\/code>. This same idea can be used to declare column row information.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Responsive Advantages<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now that a layout has been created, it seems very \u201cdesktop.\u201d What about tablets and mobile devices? CSS Grid Layouts work well with media queries so the design can adapt to different screen sizes. What\u2019s really cool is that you can change the content areas at these different media query breakpoints. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As a designer, this means you choose what is best for your layout at different breakpoints. For example, if you want the \u201cextra content\u201d to be placed above the \u201ccontent\u201d area, you can specify the correct columns and rows.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;css]\n\n\/* For mobile phones: *\/\n    .header {\n    grid-column-start: 1;\n    grid-column-end: 4;\n    grid-row-start: 1;\n    grid-row-end: 2;\n  }\n\n  .extra {\n    grid-column-start: 1;\n    grid-column-end: 4;\n    grid-row-start: 3;\n    grid-row-end: 4;\n  }\n\n  .content {\n    grid-column-start: 1;\n    grid-column-end: 4;\n    grid-row-start: 5;\n    grid-row-end: 6;\n    background: #f5c531;\n    height: 400px;\n  }\n\n&#091;\/css]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">By having the columns start at one and end at four, we\u2019ve made the content areas full width. The grid rows are placed so that the \u201cextra content\u201d is now above the \u201ccontent.\u201d<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Browser tool for CSS Grid Layout<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">As you\u2019re designing layouts, or inspecting other websites, Firefox offers a great tool for working with CSS Grid Layouts. It is called <a href=\"https:\/\/mozilladevelopers.github.io\/playground\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Grid Playground<\/a> and it makes examining the grid very intuitive. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By going to the inspector there\u2019s an option in the layout tab to visually see how the grid is constructed. It will make the design process easier to have this tool to explore how different grid properties affect the overall grid layout and design.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/08\/css-grid-playground.jpg\" alt=\"Screenshot of Firefox's CSS Grid Playground\" class=\"wp-image-25313\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">CSS Grid Layouts are a new, exciting way to create web layouts. As you can see, it is pretty easy to be up and running when creating a simple page layout. This simple example is a good foundation for how to make more complex layouts. As this gains in popularity, there will be an advantage to this technology when designing for various devices and breakpoints with the layout customizations that can be made.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To ensure any and all of your design choices load quickly and perform as intended, make sure to check out WP Engine&#8217;s <a href=\"https:\/\/wpengine.com\/wordpress-hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress hosting<\/a> solutions for a lightning fast digital experience!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you\u2019ve ever dabbled in print design, you know where the idea of grid layouts originated from. A grid is a precise measurement tool used to position design elements on a page. This idea is often used on the web to make content organized and uniform, making for an improved viewing experience for your users.<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":1,"featured_media":142005,"template":"","resource-topic":[1396,901],"resource-role":[1397,896,897],"resource-type":[916],"class_list":["post-139703","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create a Simple Layout with CSS Grid Layouts<\/title>\n<meta name=\"description\" content=\"CSS Grid Layouts are a great way to create web layouts with lots of flexibility and control. Follow this simple tutorial to learn the basics!\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Simple Layout with CSS Grid Layouts\" \/>\n<meta property=\"og:description\" content=\"CSS Grid Layouts are a great way to create web layouts with lots of flexibility and control. Follow this simple tutorial to learn the basics!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/css-grid-layouts-how-to\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-13T19:21:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/css-layouts-header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"627\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to Create a Simple Layout with CSS Grid Layouts\" \/>\n<meta name=\"twitter:description\" content=\"CSS Grid Layouts are a great way to create web layouts with lots of flexibility and control. Follow this simple tutorial to learn the basics!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/css-layouts-header.png\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/css-grid-layouts-how-to\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/css-grid-layouts-how-to\/\",\"name\":\"How to Create a Simple Layout with CSS Grid Layouts\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2017-12-19T17:00:13+00:00\",\"dateModified\":\"2023-11-13T19:21:18+00:00\",\"description\":\"CSS Grid Layouts are a great way to create web layouts with lots of flexibility and control. Follow this simple tutorial to learn the basics!\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/css-grid-layouts-how-to\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/css-grid-layouts-how-to\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/css-grid-layouts-how-to\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create a Simple Layout with CSS Grid Layouts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create a Simple Layout with CSS Grid Layouts","description":"CSS Grid Layouts are a great way to create web layouts with lots of flexibility and control. Follow this simple tutorial to learn the basics!","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How to Create a Simple Layout with CSS Grid Layouts","og_description":"CSS Grid Layouts are a great way to create web layouts with lots of flexibility and control. Follow this simple tutorial to learn the basics!","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/css-grid-layouts-how-to\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2023-11-13T19:21:18+00:00","og_image":[{"width":1200,"height":627,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/css-layouts-header.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_title":"How to Create a Simple Layout with CSS Grid Layouts","twitter_description":"CSS Grid Layouts are a great way to create web layouts with lots of flexibility and control. Follow this simple tutorial to learn the basics!","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/css-layouts-header.png","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/css-grid-layouts-how-to\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/css-grid-layouts-how-to\/","name":"How to Create a Simple Layout with CSS Grid Layouts","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2017-12-19T17:00:13+00:00","dateModified":"2023-11-13T19:21:18+00:00","description":"CSS Grid Layouts are a great way to create web layouts with lots of flexibility and control. Follow this simple tutorial to learn the basics!","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/css-grid-layouts-how-to\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/css-grid-layouts-how-to\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/css-grid-layouts-how-to\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Create a Simple Layout with CSS Grid Layouts"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/css-layouts-grid.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Designer, Developer, Freelancer","topic":"<strong>Topics:<\/strong> Design, WordPress","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/139703","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/142005"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=139703"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=139703"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=139703"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=139703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}