{"id":28235,"date":"2022-03-24T21:08:43","date_gmt":"2022-03-24T21:08:43","guid":{"rendered":"http:\/\/build-a-responsive-image-grid-with-chakra-ui-in-next.js"},"modified":"2025-02-22T15:33:17","modified_gmt":"2025-02-22T23:33:17","slug":"build-a-responsive-image-grid-with-chakra-ui-in-next-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/","title":{"rendered":"Build a Responsive Image with Chakra-ui in Next.js"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><h2>Introduction<\/h2>\n<p>Users interact with the web through different devices, from phones and laptops to smartwatches. As developers, we must ensure that the websites and web applications we create are performant, functional, and responsive on all screen sizes.<\/p>\n<p><a href=\"https:\/\/chakra-ui.com\/\">Chakra-UI<\/a> is a simple, modular, and easily extensible component library that provides building blocks for our front-end application structure.<\/p>\n<p>This article will discuss using Chakra-ui <code>Grid<\/code> and <code>SimpleGrid<\/code> components respectively to build a responsive image grid in a Next.js application.<\/p>\n<h2>Sandbox<\/h2>\n<p>We completed the application in <a href=\"https:\/\/codesandbox.io\/s\/determined-perlman-evoxk9\">CodeSandbox<\/a>. Fork it and run the code.<\/p>\n<p>The source code for this application is available on <a href=\"https:\/\/github.com\/Tundesamson26\/chakra-ui-image-image-grid-with-Next.js\">GitHub<\/a>.<\/p>\n<h2>Prerequisites<\/h2>\n<p>The knowledge of the following is required:<\/p>\n<ul>\n<li>A basic understanding of <a href=\"https:\/\/en.wikipedia.org\/wiki\/CSS\">CSS<\/a>, <a href=\"https:\/\/en.wikipedia.org\/wiki\/JavaScript\">JavaScript<\/a>, and <a href=\"https:\/\/reactjs.org\/\">React.js<\/a>.<\/li>\n<li>Node and its package manager, npm. We run the command <code>node -v &amp;&amp; npm -v<\/code>\nto verify we have them installed, or install them from <a href=\"https:\/\/nodejs.org\/en\/\">here<\/a>.<\/li>\n<li>Alternatively, we can use another package manager, <a href=\"https:\/\/yarnpkg.com\/\">Yarn<\/a>.<\/li>\n<li>Understanding Next.js would help us follow this tutorial quicker.<\/li>\n<\/ul>\n<h2>Setting up the Next.js application<\/h2>\n<p><a href=\"https:\/\/nextjs.org\/\">Next.js<\/a> is an open-source React framework that enables us to build server-side rendering static web applications.<\/p>\n<p>To create our Next.js app, we go to our terminal or command line. Using the <code>git cd<\/code> command, we navigate to the directory in which we want our app to be created.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>cd &lt;directory-name&gt;\n<\/code><\/pre>\n<p>Once inside the directory, we create our project by running the command below:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>npx create-next-app\n\n# or\n\nyarn create next-app \n<\/code><\/pre>\n<p>Once that\u2019s finished, we can navigate into that directory and start a hot-reloading development server for the project with:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>npm run dev\n#or\nyarn dev\n<\/code><\/pre>\n<p>We open <a href=\"http:\/\/localhost:3000\">http:\/\/localhost:3000<\/a> from the browser to see the application.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams_sanity\/4869071ccb6e210b64c8f686eb844228ba66e6c3-1352x619.png\" alt=\"nextjs-on-localhost\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1352\" height=\"619\"\/><\/p>\n<blockquote>\n<p>Next.js on port 3000<\/p>\n<\/blockquote>\n<h2>Installing and Configuring Chakra UI in Next.js<\/h2>\n<p>Next, we install the required dependencies in our project directory, by running:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>npm i @chakra-ui\/react @emotion\/react@^11 @emotion\/styled@^11 framer-motion@^6\n#or\nyarn add @chakra-ui\/react @emotion\/react@^11 @emotion\/styled@^11 framer-motion@^6\n<\/code><\/pre>\n<p>Using this command, Chakra UI and its dependencies, including <code>emotion<\/code> and <code>framer-motion<\/code>, will be installed, as it relies on them for the styling.<\/p>\n<p>To get Chakra working inside our app, we need to configure a <code>Provider<\/code> at the root of our application. This configuration will allow Chakra\u2019s components to share data and maintain consistent styles.<\/p>\n<p>Go to <code>pages\/_app.js<\/code>  (create if it doesn\u2019t exist) and add the snippet below:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>import { ChakraProvider } from '@chakra-ui\/react'\n\nfunction MyApp({ Component, pageProps }) {\n  return (\n    &lt;ChakraProvider&gt;\n      &lt;Component {...pageProps} \/&gt;\n    &lt;\/ChakraProvider&gt;\n  )\n}\n\nexport default MyApp\n<\/code><\/pre>\n<h2>Using Chakra-UI <code>Grid<\/code> Component to Build a Responsive Image grid<\/h2>\n<p>Chakra allows us to set responsive styles with its baked-in sizing, allowing us to recreate our responsive grid cards easily.<\/p>\n<p>Grid renders a <code>div<\/code> element. Grid is a chakra-ui <code>Box<\/code> component with <code>display: grid``,<\/code> and it comes with helpful style shorthand.<\/p>\n<p>The first thing to do is <code>import<\/code> the <code>Grid<\/code>, <code>Box<\/code> and <code>Image<\/code> components to our file. We create the <code>posts<\/code> directory under <code>pages<\/code>.<\/p>\n<p>Then, we will create a file called <code>Grid.js<\/code> inside the <code>posts<\/code> directory with the following content:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>import { Grid, Box, Image } from '@chakra-ui\/react'\n<\/code><\/pre>\n<p>We will use the <code>Grid<\/code> component to make our responsive image that will span through the different screens.<\/p>\n<p>Enter the code block below into the rendered JSX portion of the <code>Grid.js<\/code> file:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&lt;Grid\n      templateColumns=&quot;repeat(3, 1fr)&quot;\n      gap={6}\n      height=&quot;auto&quot;\n      maxW=&quot;xl&quot;\n      alignItems=&quot;center&quot;\n      justifyContent=&quot;center&quot;\n      margin=&quot;100px auto&quot;\n    &gt;\n      &lt;Box&gt;\n        &lt;Image src=&quot;https:\/\/bit.ly\/dan-abramov&quot; alt=&quot;Dan Abramov&quot; \/&gt;\n      &lt;\/Box&gt;\n      &lt;Box&gt;\n        &lt;Image src=&quot;https:\/\/bit.ly\/dan-abramov&quot; alt=&quot;Dan Abramov&quot; \/&gt;\n      &lt;\/Box&gt;\n      &lt;Box&gt;\n        &lt;Image src=&quot;https:\/\/bit.ly\/dan-abramov&quot; alt=&quot;Dan Abramov&quot; \/&gt;\n      &lt;\/Box&gt;\n      &lt;Box&gt;\n        &lt;Image src=&quot;https:\/\/bit.ly\/dan-abramov&quot; alt=&quot;Dan Abramov&quot; \/&gt;\n      &lt;\/Box&gt;\n      &lt;Box&gt;\n        &lt;Image src=&quot;https:\/\/bit.ly\/dan-abramov&quot; alt=&quot;Dan Abramov&quot; \/&gt;\n      &lt;\/Box&gt;\n      &lt;Box&gt;\n        &lt;Image src=&quot;https:\/\/bit.ly\/dan-abramov&quot; alt=&quot;Dan Abramov&quot; \/&gt;\n      &lt;\/Box&gt;\n    &lt;\/Grid&gt;\n<\/code><\/pre>\n<p>In the above code block, we did the following process:<\/p>\n<ul>\n<li>\n<code>Grid<\/code>: The main wrapper with <code>display: grid<\/code>.<\/li>\n<li>\n<code>Box<\/code>: <code>Box<\/code> is the most abstract component on top of which all other Chakra UI components are built. By default, it renders a <code>div<\/code> element.<\/li>\n<li>\n<code>Image<\/code>: The <code>Image<\/code> component is used to display images. <code>Image<\/code> composes <code>Box<\/code> to use all the style props and add responsive styles as well.<\/li>\n<\/ul>\n<p>By now, we should have something like this in our Next.js application.<\/p>\n<p>Note: Navigate to <a href=\"http:\/\/localhost:3000\/posts\/Grid\">http:\/\/localhost:3000\/posts\/Grid<\/a> (or anything our directory is named).<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams_sanity\/e166b197cea0ead85c9f91eebbcfcf6f0f989ca9-1366x624.png\" alt=\"responsive-image-on-pc\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1366\" height=\"624\"\/><\/p>\n<blockquote>\n<p>On a PC screen<\/p>\n<\/blockquote>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams_sanity\/db0424f8f8c3c5b8e4092a03522b0285fbd583d9-719x489.png\" alt=\"responsive-image-on-mobile\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"719\" height=\"489\"\/><\/p>\n<blockquote>\n<p>On a Mobile phone<\/p>\n<\/blockquote>\n<p>And that is how to use the Charka-ui Grid component to build a responsive image grid.<\/p>\n<h2>Using <code>SimpleGrid<\/code> Component to Build a Responsive Image-grid<\/h2>\n<p><code>SimpleGrid<\/code> provides a friendly interface to create responsive grid layouts. It renders a <code>div<\/code> element with <code>display: grid<\/code>.<\/p>\n<p>The first thing to do is to <code>import<\/code> the <code>SimpleGrid<\/code>, <code>Box<\/code> and <code>Image<\/code> components to your file, inside the <code>pages\/index.js<\/code>.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>import { SimpleGrid, Box, Image } from &quot;@chakra-ui\/react&quot;;\n<\/code><\/pre>\n<p>To make our image grid responsive through different screens using the SimpleGrid component, we copy the code below into the rendered JSX portion of pages\/index.js directory:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&lt;SimpleGrid\n        minChildWidth=&quot;150px&quot;\n        spacing=&quot;40px&quot;zes\n        maxW=&quot;xl&quot;\n        alignItems=&quot;center&quot;\n        justifyContent=&quot;center&quot;\n        margin=&quot;100px auto&quot;\n      &gt;\n        &lt;Box&gt;\n          &lt;Image src=&quot;https:\/\/bit.ly\/dan-abramov&quot; alt=&quot;Dan Abramov&quot; \/&gt;\n        &lt;\/Box&gt;\n        &lt;Box&gt;\n          &lt;Image src=&quot;https:\/\/bit.ly\/dan-abramov&quot; alt=&quot;Dan Abramov&quot; \/&gt;\n        &lt;\/Box&gt;\n        &lt;Box&gt;\n          &lt;Image src=&quot;https:\/\/bit.ly\/dan-abramov&quot; alt=&quot;Dan Abramov&quot; \/&gt;\n        &lt;\/Box&gt;\n        &lt;Box&gt;\n          &lt;Image src=&quot;https:\/\/bit.ly\/dan-abramov&quot; alt=&quot;Dan Abramov&quot; \/&gt;\n        &lt;\/Box&gt;\n        &lt;Box&gt;\n          &lt;Image src=&quot;https:\/\/bit.ly\/dan-abramov&quot; alt=&quot;Dan Abramov&quot; \/&gt;\n        &lt;\/Box&gt;\n        &lt;Box&gt;\n          &lt;Image src=&quot;https:\/\/bit.ly\/dan-abramov&quot; alt=&quot;Dan Abramov&quot; \/&gt;\n        &lt;\/Box&gt;\n      &lt;\/SimpleGrid&gt;\n<\/code><\/pre>\n<p>To make the grid responsive and adjust automatically without passing <code>columns<\/code>, pass the <code>minChildWidth<\/code> prop to specify the <code>min-width<\/code> a child should have before changing the layout.\nThis uses CSS grid auto-fit and <code>minmax()<\/code> internally.\n<code>Box<\/code> and <code>Image<\/code> components are similar to those imported when we used <code>Grid<\/code> above.<\/p>\n<p>By now, we should have something like this in our Next.js application. Navigate to <a href=\"http:\/\/localhost:3000\">http:\/\/localhost:3000<\/a><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams_sanity\/7c71121c2f849052261977d72060d8a2bae2e69a-1346x623.png\" alt=\"responsive-image-on-pc\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1346\" height=\"623\"\/><\/p>\n<blockquote>\n<p>On a PC screen<\/p>\n<\/blockquote>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams_sanity\/f0a8426e502496f0b198cf4147731a9799fd4004-748x560.png\" alt=\"responsive-image-on-mobile\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"748\" height=\"560\"\/><\/p>\n<blockquote>\n<p>On a Mobile phone<\/p>\n<\/blockquote>\n<h2>Conclusion<\/h2>\n<p>In this article, we used the Chakra-UI <code>SimpleGrid<\/code> and <code>Grid<\/code> components, respectively, to build a responsive image grid.<\/p>\n<h2>Resources<\/h2>\n<p>To learn more about using Chakra-UI, check out the following resources:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/chakra-ui.com\/\">Introduction to using chakra-ui.<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/chakra-ui.com\/docs\/layout\/grid\">Using chakra-ui Grid components.<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/chakra-ui.com\/docs\/layout\/simple-grid\">Build with chakra-ui SimpleGrid components.<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28236,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[75,134,370,177,212,246,249,371],"class_list":["post-28235","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-css","tag-guest-post","tag-image","tag-javascript","tag-next-js","tag-react","tag-responsive","tag-under-review"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Build a Responsive Image with Chakra-ui in Next.js<\/title>\n<meta name=\"description\" content=\"This article discussed using Chakra-ui for image grid responsiveness in Next.js. The Grid and SimpleGrid component of Chakra-ui is used respectively. It explains what Chakra-ui is, gives a brief introduction to Next.js, and show how to use Chakra-ui Grid and SimpleGrid component respectively to build a responsive image 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:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build a Responsive Image with Chakra-ui in Next.js\" \/>\n<meta property=\"og:description\" content=\"This article discussed using Chakra-ui for image grid responsiveness in Next.js. The Grid and SimpleGrid component of Chakra-ui is used respectively. It explains what Chakra-ui is, gives a brief introduction to Next.js, and show how to use Chakra-ui Grid and SimpleGrid component respectively to build a responsive image grid.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-24T21:08:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-22T23:33:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925050\/Web_Assets\/blog\/cad0ecc3a92ffa5c4df1544709aa0ed17b21c172-3000x1987-1_28236ac623\/cad0ecc3a92ffa5c4df1544709aa0ed17b21c172-3000x1987-1_28236ac623-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"3000\" \/>\n\t<meta property=\"og:image:height\" content=\"1987\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Build a Responsive Image with Chakra-ui in Next.js\",\"datePublished\":\"2022-03-24T21:08:43+00:00\",\"dateModified\":\"2025-02-22T23:33:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925050\/Web_Assets\/blog\/cad0ecc3a92ffa5c4df1544709aa0ed17b21c172-3000x1987-1_28236ac623\/cad0ecc3a92ffa5c4df1544709aa0ed17b21c172-3000x1987-1_28236ac623.jpg?_i=AA\",\"keywords\":[\"CSS\",\"Guest Post\",\"Image\",\"Javascript\",\"Next.js\",\"React\",\"Responsive\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/\",\"name\":\"Build a Responsive Image with Chakra-ui in Next.js\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925050\/Web_Assets\/blog\/cad0ecc3a92ffa5c4df1544709aa0ed17b21c172-3000x1987-1_28236ac623\/cad0ecc3a92ffa5c4df1544709aa0ed17b21c172-3000x1987-1_28236ac623.jpg?_i=AA\",\"datePublished\":\"2022-03-24T21:08:43+00:00\",\"dateModified\":\"2025-02-22T23:33:17+00:00\",\"description\":\"This article discussed using Chakra-ui for image grid responsiveness in Next.js. The Grid and SimpleGrid component of Chakra-ui is used respectively. It explains what Chakra-ui is, gives a brief introduction to Next.js, and show how to use Chakra-ui Grid and SimpleGrid component respectively to build a responsive image grid.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925050\/Web_Assets\/blog\/cad0ecc3a92ffa5c4df1544709aa0ed17b21c172-3000x1987-1_28236ac623\/cad0ecc3a92ffa5c4df1544709aa0ed17b21c172-3000x1987-1_28236ac623.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925050\/Web_Assets\/blog\/cad0ecc3a92ffa5c4df1544709aa0ed17b21c172-3000x1987-1_28236ac623\/cad0ecc3a92ffa5c4df1544709aa0ed17b21c172-3000x1987-1_28236ac623.jpg?_i=AA\",\"width\":3000,\"height\":1987},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build a Responsive Image with Chakra-ui in Next.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Build a Responsive Image with Chakra-ui in Next.js","description":"This article discussed using Chakra-ui for image grid responsiveness in Next.js. The Grid and SimpleGrid component of Chakra-ui is used respectively. It explains what Chakra-ui is, gives a brief introduction to Next.js, and show how to use Chakra-ui Grid and SimpleGrid component respectively to build a responsive image 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:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/","og_locale":"en_US","og_type":"article","og_title":"Build a Responsive Image with Chakra-ui in Next.js","og_description":"This article discussed using Chakra-ui for image grid responsiveness in Next.js. The Grid and SimpleGrid component of Chakra-ui is used respectively. It explains what Chakra-ui is, gives a brief introduction to Next.js, and show how to use Chakra-ui Grid and SimpleGrid component respectively to build a responsive image grid.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-24T21:08:43+00:00","article_modified_time":"2025-02-22T23:33:17+00:00","og_image":[{"width":3000,"height":1987,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925050\/Web_Assets\/blog\/cad0ecc3a92ffa5c4df1544709aa0ed17b21c172-3000x1987-1_28236ac623\/cad0ecc3a92ffa5c4df1544709aa0ed17b21c172-3000x1987-1_28236ac623-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/"},"author":{"name":"","@id":""},"headline":"Build a Responsive Image with Chakra-ui in Next.js","datePublished":"2022-03-24T21:08:43+00:00","dateModified":"2025-02-22T23:33:17+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/"},"wordCount":9,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925050\/Web_Assets\/blog\/cad0ecc3a92ffa5c4df1544709aa0ed17b21c172-3000x1987-1_28236ac623\/cad0ecc3a92ffa5c4df1544709aa0ed17b21c172-3000x1987-1_28236ac623.jpg?_i=AA","keywords":["CSS","Guest Post","Image","Javascript","Next.js","React","Responsive","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/","name":"Build a Responsive Image with Chakra-ui in Next.js","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925050\/Web_Assets\/blog\/cad0ecc3a92ffa5c4df1544709aa0ed17b21c172-3000x1987-1_28236ac623\/cad0ecc3a92ffa5c4df1544709aa0ed17b21c172-3000x1987-1_28236ac623.jpg?_i=AA","datePublished":"2022-03-24T21:08:43+00:00","dateModified":"2025-02-22T23:33:17+00:00","description":"This article discussed using Chakra-ui for image grid responsiveness in Next.js. The Grid and SimpleGrid component of Chakra-ui is used respectively. It explains what Chakra-ui is, gives a brief introduction to Next.js, and show how to use Chakra-ui Grid and SimpleGrid component respectively to build a responsive image grid.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925050\/Web_Assets\/blog\/cad0ecc3a92ffa5c4df1544709aa0ed17b21c172-3000x1987-1_28236ac623\/cad0ecc3a92ffa5c4df1544709aa0ed17b21c172-3000x1987-1_28236ac623.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925050\/Web_Assets\/blog\/cad0ecc3a92ffa5c4df1544709aa0ed17b21c172-3000x1987-1_28236ac623\/cad0ecc3a92ffa5c4df1544709aa0ed17b21c172-3000x1987-1_28236ac623.jpg?_i=AA","width":3000,"height":1987},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-responsive-image-grid-with-chakra-ui-in-next-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build a Responsive Image with Chakra-ui in Next.js"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925050\/Web_Assets\/blog\/cad0ecc3a92ffa5c4df1544709aa0ed17b21c172-3000x1987-1_28236ac623\/cad0ecc3a92ffa5c4df1544709aa0ed17b21c172-3000x1987-1_28236ac623.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28235"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28235\/revisions"}],"predecessor-version":[{"id":36965,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28235\/revisions\/36965"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28236"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}