{"id":367204,"date":"2022-08-08T05:55:49","date_gmt":"2022-08-08T12:55:49","guid":{"rendered":"https:\/\/css-tricks.com\/?p=367204"},"modified":"2022-08-08T06:12:33","modified_gmt":"2022-08-08T13:12:33","slug":"zooming-images-in-a-grid-layout","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/zooming-images-in-a-grid-layout\/","title":{"rendered":"Zooming Images in a Grid Layout"},"content":{"rendered":"\n<p>Creating a grid of images is easy, thanks to CSS Grid. But making the grid do fancy things <em>after<\/em> the images have been placed can be tricky to pull off.<\/p>\n\n\n\n<p>Say you want to add some fancy hover effect to the images where they grow and zoom beyond the rows and columns where they sit? We can do that!<\/p>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWVyaMe\" src=\"\/\/codepen.io\/anon\/embed\/MWVyaMe?height=650&amp;theme-id=1&amp;slug-hash=MWVyaMe&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWVyaMe\" title=\"CodePen Embed MWVyaMe\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Cool, right? If you check the code, you won\u2019t find any JavaScript, complex selectors, or even <a href=\"https:\/\/css-tricks.com\/magic-numbers-in-css\/\">magic numbers<\/a>. And this is only one example among many we will explore!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"building-the-grid\">Building the grid<\/h3>\n\n\n<p>The HTML code to create the grid is as simple as a list of images within a container. We don\u2019t need more than that.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div class=\"gallery\">\n  &lt;img>\n  &lt;img>\n  &lt;img>\n  &lt;!-- etc. -->\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>For the CSS, we first start by setting the grid using the following:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.gallery {\n  --s: 150px; \/* controls the size *\/\n  --g: 10px;  \/* controls the gap *\/\n\n  display: grid;\n  gap: var(--g);\n  width: calc(3*var(--s) + 2*var(--g)); \/* 3 times the size plus 2 times the gap *\/\n  aspect-ratio: 1;\n  grid-template-columns: repeat(3, auto);\n}<\/code><\/pre>\n\n\n\n<p>In short, we have two variables, one that controls the size of the images and one that sets the size of the gap between images. <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/a\/aspect-ratio\/\"><code>aspect-ratio<\/code><\/a> helps keep things in proportion.<\/p>\n\n\n\n<p>You might be wondering why we are only defining three columns but no rows. No, I didn\u2019t forget the rows \u2014 we just don\u2019t need to explicitly set them. CSS Grid is capable of automatically placing items on <a href=\"https:\/\/css-tricks.com\/difference-explicit-implicit-grids\/\">implicit rows and columns<\/a>, meaning we get as many rows as needed to any number of images we throw at it. We can explicitly define the rows instead but we need to add <code>grid-auto-flow: column<\/code> to make sure the browser will create the needed columns for us.<\/p>\n\n\n\n<p>Here is an example to illustrate both cases. The difference is that one flows in a <code>row<\/code> direction an the other in a <code>column<\/code> direction.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GRxZVyL\/eb5ac7548fd3e32099046f0b7ee5d402\" src=\"\/\/codepen.io\/anon\/embed\/GRxZVyL\/eb5ac7548fd3e32099046f0b7ee5d402?height=375&amp;theme-id=1&amp;slug-hash=GRxZVyL\/eb5ac7548fd3e32099046f0b7ee5d402&amp;default-tab=result\" height=\"375\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GRxZVyL\/eb5ac7548fd3e32099046f0b7ee5d402\" title=\"CodePen Embed GRxZVyL\/eb5ac7548fd3e32099046f0b7ee5d402\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"is-style-explanation\">Check out <a href=\"https:\/\/css-tricks.com\/exploring-css-grids-implicit-grid-and-auto-placement-powers\">this other article I wrote<\/a> for more about the implicit grids and the auto-placement algorithm.<\/p>\n\n\n\n<p>Now that we have our grid, it\u2019s time to style the images:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.gallery > img {\n  width: 0;\n  height: 0;\n  min-height: 100%;\n  min-width: 100%;\n  object-fit: cover;\n}<\/code><\/pre>\n\n\n\n<p>The hover effect we\u2019re making relies on this CSS. It probably looks weird to you that we\u2019re making images that have both no width or height but have a minimum width and height of 100%. But you will see that it\u2019s a pretty neat trick for what we are trying to achieve.<\/p>\n\n\n\n<p>What I\u2019m doing here is telling the browser that the images need to have <code>0<\/code> width and height but also need to have a minimum height equal to <code>100%<\/code>\u2026 but <code>100%<\/code> of what? When using percentages, the value is <a href=\"https:\/\/css-tricks.com\/its-all-relative\/\">relative to something else<\/a>. In this case, our image is placed inside a <a href=\"https:\/\/www.w3.org\/TR\/css-grid-1\/#grid-track-concept\" rel=\"noopener\">grid cell<\/a> and we need to know that size to know what\u2019s <code>100%<\/code> is relative to.<\/p>\n\n\n\n<p>The browser will first ignore <code>min-height: 100%<\/code> to calculate the size of the grid cells, but it will use the <code>height: 0<\/code> in its calculation. That means our images will not contribute to the size of the grid cells\u2026 because they technically have no physical size. This will result in three equal columns and rows that are based on the size of the grid (which we defined on the <code>.gallery<\/code>\u2019s width and <code>aspect-ratio<\/code>). The height of each grid cell is nothing but the variable <code>--s<\/code> we defined (same for the width).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"683\" height=\"543\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_01F8E5AC73A410E2BD248A1E8BF44B1521B06E917569E7B737C2E757E4896704_1657396789143_image.png?resize=683%2C543&#038;ssl=1\" alt=\"\" class=\"wp-image-367205\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_01F8E5AC73A410E2BD248A1E8BF44B1521B06E917569E7B737C2E757E4896704_1657396789143_image.png?w=683&amp;ssl=1 683w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_01F8E5AC73A410E2BD248A1E8BF44B1521B06E917569E7B737C2E757E4896704_1657396789143_image.png?resize=300%2C239&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Now that we have the dimensions of our grid\u2019s cells, the browser will use it with <code>min-height: 100%<\/code> (and <code>min-width: 100%<\/code>) which will force the images to completely fill the space of each grid cell. The whole thing may look a bit confusing but the main idea is to make sure that the grid defines the size of the images rather than the other way around. I don\u2019t want the image to define the size of the grid and you will understand why after adding the hover effect.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"creating-the-hover-effect\">Creating the hover effect<\/h3>\n\n\n<p>What we need to do is increase the scale of the images when they\u2019re hovered. We can do that by adjusting an image\u2019s <code>width<\/code> and <code>height<\/code> on <code>:hover<\/code>:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.gallery {\n  --f: 1.5; \/* controls the scale factor *\/\n}\n\n.gallery img:hover{\n  width:  calc(var(--s) * var(--f));\n  height: calc(var(--s) * var(--f));\n}<\/code><\/pre>\n\n\n\n<p>I added a new custom variable, <code>--f<\/code>, to the mix as a scale factor to control the size on hover. Notice how I\u2019m multiplying the size variable, <code>--s<\/code>, by it to calculate the new image size.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>But you said that the image size needs to be 0. What is going on? I am lost&#8230;<\/p><\/blockquote>\n\n\n\n<p>What I said is still true but I am making an exception for the hovered image. I am telling the browser that only one image will have a size that\u2019s not equal to zero \u2014 so it will contribute to the dimension of the grid \u2014 while all the others remain equal to <code>0<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"850\" height=\"405\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_01F8E5AC73A410E2BD248A1E8BF44B1521B06E917569E7B737C2E757E4896704_1657399681779_image.png?resize=850%2C405&#038;ssl=1\" alt=\"\" class=\"wp-image-367206\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_01F8E5AC73A410E2BD248A1E8BF44B1521B06E917569E7B737C2E757E4896704_1657399681779_image.png?w=850&amp;ssl=1 850w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_01F8E5AC73A410E2BD248A1E8BF44B1521B06E917569E7B737C2E757E4896704_1657399681779_image.png?resize=300%2C143&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_01F8E5AC73A410E2BD248A1E8BF44B1521B06E917569E7B737C2E757E4896704_1657399681779_image.png?resize=768%2C366&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>The left side shows the grid in its natural state without any hovered images, which is what the right side is showing. All the grid cells on the left side are equal in size since all the images have no physical dimensions.<\/p>\n\n\n\n<p>On the right side, the second image in the first row is hovered, which gives it dimensions that affect the grid cell\u2019s size. The browser will make that specific grid cell bigger on hover, which contributes to the overall size. And since the size of the whole grid is set (because we set a fixed <code>width<\/code> on the <code>.gallery<\/code>), the other grid cells will logically respond by becoming smaller in order to keep the <code>.gallery<\/code>\u2018s overall size in tact.<\/p>\n\n\n\n<p>That\u2019s our zoom effect in action! By increasing the size of only one image we affect the whole grid configuration, and we said before that the grid defines the size of the images so that each image stretches inside its grid cell to fill all the space.<\/p>\n\n\n\n<p>To this, we add a touch of <code>transition<\/code> and use <code>object-fit<\/code> to avoid image distortion and the illusion is perfect!<\/p>\n\n\n\n<p>I know that the logic behind the trick is not easy to grasp. Don\u2019t worry if you don\u2019t fully understand it. The most important is to understand the structure of the code used and how to modify it to get more variations. That\u2019s what we will do next!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"adding-more-images\">Adding more images<\/h3>\n\n\n<p>We created a 3\u00d73 grid to explain the main trick, but you have probably guessed that we there\u2019d no need to stop there. We can make the number of columns and rows variables and add as many images as we want.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abYNPaG\/ad9882af8ae5e2661895e62b63b0249f\" src=\"\/\/codepen.io\/anon\/embed\/abYNPaG\/ad9882af8ae5e2661895e62b63b0249f?height=750&amp;theme-id=1&amp;slug-hash=abYNPaG\/ad9882af8ae5e2661895e62b63b0249f&amp;default-tab=result\" height=\"750\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abYNPaG\/ad9882af8ae5e2661895e62b63b0249f\" title=\"CodePen Embed abYNPaG\/ad9882af8ae5e2661895e62b63b0249f\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.gallery {\n  --n: 3; \/* number of rows*\/\n  --m: 4; \/* number of columns *\/\n  --s: 150px; \/* control the size *\/\n  --g: 10px;  \/* control the gap *\/\n  --f: 1.5;   \/* control the scale factor *\/\n\n  display: grid;\n  gap: var(--g);\n  width:  calc(var(--m)*var(--s) + (var(--m) - 1)*var(--g));\n  height: calc(var(--n)*var(--s) + (var(--n) - 1)*var(--g));\n  grid-template-columns: repeat(var(--m),auto);\n}<\/code><\/pre>\n\n\n\n<p>We have two new variables for the number of rows and columns. Then we simply define the width and height of our grid using them. Same for <code>grid-template-columns<\/code> which uses the <code>--m<\/code> variable. And just like before, we don\u2019t need to explicitly define the rows since the CSS Grid\u2019s auto-placement feature will do the job for us no matter how many image elements we\u2019re using.<\/p>\n\n\n\n<p>Why not different values for the width and height? We can do that:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ExEKGGL\/4ebfa4c36fcd988c96fd3ca404a5587f\" src=\"\/\/codepen.io\/anon\/embed\/ExEKGGL\/4ebfa4c36fcd988c96fd3ca404a5587f?height=600&amp;theme-id=1&amp;slug-hash=ExEKGGL\/4ebfa4c36fcd988c96fd3ca404a5587f&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ExEKGGL\/4ebfa4c36fcd988c96fd3ca404a5587f\" title=\"CodePen Embed ExEKGGL\/4ebfa4c36fcd988c96fd3ca404a5587f\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.gallery {\n  --n: 3; \/* number of rows*\/\n  --m: 4; \/* number of columns *\/\n  --h: 120px; \/* control the height *\/\n  --w: 150px; \/* control the width *\/\n  --g: 10px;  \/* control the gap *\/\n  --f: 1.5;   \/* control the scale factor *\/\n\n  display: grid;\n  gap: var(--g);\n  width:  calc(var(--m)*var(--w) + (var(--m) - 1)*var(--g));\n  height: calc(var(--n)*var(--h) + (var(--n) - 1)*var(--g));\n  grid-template-columns: repeat(var(--m),auto);\n}\n\n.gallery img:hover{\n  width:  calc(var(--w)*var(--f));\n  height: calc(var(--h)*var(--f));\n}<\/code><\/pre>\n\n\n\n<p>We replace <code>--s<\/code> with two variables, one for the width, <code>--w<\/code>, and another one for the height, <code>--h<\/code>. Then we adjust everything else accordingly.<\/p>\n\n\n\n<p>So, we started with a grid with a fixed size and number of elements, but then we made a new set of variables to get any configuration we want. All we have to do is to add as many images as we want and adjust the CSS variables accordingly. The combinations are limitless!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"a-fullscreen-gallery-of-images\">A full-screen gallery of images<\/h3>\n\n\n<p>What about a full-screen version? Yes, that\u2019s also possible. All we need is to know what values we need to assign to our variables. If we want <code>N<\/code> rows of images and we want our grid to be full screen, we first need to solve for a height of <code>100vh<\/code>:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">var(--n) * var(--h) + (var(--n) - 1) * var(--g) = 100vh<\/code><\/pre>\n\n\n\n<p>Same logic for the width, but using <code>vw<\/code> instead of <code>vh<\/code>:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">var(--m) * var(--w) + (var(--m) - 1) * var(--g) = 100vw<\/code><\/pre>\n\n\n\n<p>We do the math to get:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">--w: (100vw - (var(--m) - 1) * var(--g)) \/ var(--m)\n--h: (100vh - (var(--n) - 1) * var(--g)) \/ var(--n)<\/code><\/pre>\n\n\n\n<p>Done!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eYMZbwy\/25fa03e17ac76431733157d58e026bfb\" src=\"\/\/codepen.io\/anon\/embed\/eYMZbwy\/25fa03e17ac76431733157d58e026bfb?height=650&amp;theme-id=1&amp;slug-hash=eYMZbwy\/25fa03e17ac76431733157d58e026bfb&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eYMZbwy\/25fa03e17ac76431733157d58e026bfb\" title=\"CodePen Embed eYMZbwy\/25fa03e17ac76431733157d58e026bfb\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>It\u2019s the same exact HTML but with some updated variables that change the grid\u2019s sizing and behavior.<\/p>\n\n\n\n<p>Note that I have omitted the formula we previously set on the <code>.gallery<\/code>\u2018s <code>width<\/code> and <code>height<\/code> and replaced them with <code>100vw<\/code> and <code>100vh<\/code>, respectively. The formula will give us the same result but since we know what value we want, we can ditch all that added complexity.<\/p>\n\n\n\n<p>We can also simplify the <code>--h<\/code> and <code>--w<\/code> by removing the gap from the equation in favor of this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">--h: calc(100vh \/ var(--n)); \/* Viewport height divided by number of rows *\/\n--w: calc(100vw \/ var(--m)); \/* Viewport width divided by number of columns *\/<\/code><\/pre>\n\n\n\n<p>This will make the hovered image grow a bit more than the previous example, but it is no big deal since we can control the scale with the <code>--f<\/code> variable we\u2019re using as a multiplier.<\/p>\n\n\n\n<p>And since the variables are used in one place we can still simplify the code by removing them altogether:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eYMZxYV\/c8d3ee9c92f1cf6d8487cd6a0c8619e3\" src=\"\/\/codepen.io\/anon\/embed\/eYMZxYV\/c8d3ee9c92f1cf6d8487cd6a0c8619e3?height=650&amp;theme-id=1&amp;slug-hash=eYMZxYV\/c8d3ee9c92f1cf6d8487cd6a0c8619e3&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eYMZxYV\/c8d3ee9c92f1cf6d8487cd6a0c8619e3\" title=\"CodePen Embed eYMZxYV\/c8d3ee9c92f1cf6d8487cd6a0c8619e3\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>It\u2019s important to note this optimization applies only to the full-screen example and not to the examples we\u2019ve covered. This example is a particular case where we can make the code lighter by removing some of the complex calculation work we needed in the other examples.<\/p>\n\n\n\n<p>We actually have everything we need to create the popular pattern of expanding panels:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WNzxeOO\/fae9ee2f379890e26459f66cff344cee\" src=\"\/\/codepen.io\/anon\/embed\/WNzxeOO\/fae9ee2f379890e26459f66cff344cee?height=450&amp;theme-id=1&amp;slug-hash=WNzxeOO\/fae9ee2f379890e26459f66cff344cee&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WNzxeOO\/fae9ee2f379890e26459f66cff344cee\" title=\"CodePen Embed WNzxeOO\/fae9ee2f379890e26459f66cff344cee\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"lets-dig-even-deeper\">Let\u2019s dig even deeper<\/h3>\n\n\n<p>Did you notice that our scale factor can be less than <code>1<\/code>? We can define the size of the hovered image to be smaller than <code>--h<\/code> or <code>--w<\/code> but the image gets bigger on hover.<\/p>\n\n\n\n<p>The initial grid cell size is equal to <code>--w<\/code> and <code>--h<\/code>, so why do a smaller values make the grid cell <em>bigger<\/em>? Shouldn\u2019t the cell get <em>smaller<\/em>, or at least maintain its initial size? And what is the final size of the grid cell?<\/p>\n\n\n\n<p>We need to dig deeper into how the CSS Grid algorithm calculates the size of the grid cells. And this is involves understanding CSS Grid\u2019s default <strong>stretch alignment<\/strong>.<\/p>\n\n\n\n<p>Here\u2019s an example to understand the logic.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzaWKYX\/e4ecf08477c67eb6406a99b10653ee0e\" src=\"\/\/codepen.io\/anon\/embed\/YzaWKYX\/e4ecf08477c67eb6406a99b10653ee0e?height=350&amp;theme-id=1&amp;slug-hash=YzaWKYX\/e4ecf08477c67eb6406a99b10653ee0e&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzaWKYX\/e4ecf08477c67eb6406a99b10653ee0e\" title=\"CodePen Embed YzaWKYX\/e4ecf08477c67eb6406a99b10653ee0e\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>On the left side of the demo, I defined a two-column with <code>auto<\/code> width. We get the intuitive result: two equal columns (and two equal grid cells). But the grid I set up on the right side of the demo, where I am updating the alignment using <code>place-content: start<\/code>, appears to have nothing.<\/p>\n\n\n\n<p>DevTools helps show us what\u2019s really happening in both cases:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"574\" height=\"269\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_01F8E5AC73A410E2BD248A1E8BF44B1521B06E917569E7B737C2E757E4896704_1657403436182_image-1.png?resize=574%2C269&#038;ssl=1\" alt=\"\" class=\"wp-image-367208\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_01F8E5AC73A410E2BD248A1E8BF44B1521B06E917569E7B737C2E757E4896704_1657403436182_image-1.png?w=574&amp;ssl=1 574w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_01F8E5AC73A410E2BD248A1E8BF44B1521B06E917569E7B737C2E757E4896704_1657403436182_image-1.png?resize=300%2C141&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>In the second grid, we have two columns, but their widths equal zero, so we get two grid cells that are collapsed at the top-left corner of the grid container. This is <em>not<\/em> a bug but the logical result of the grid\u2019s alignment. When we size a column (or row) with <code>auto<\/code>, it means that its content dictates its size \u2014 but we have an empty <code>div<\/code> with no content to make room for.<\/p>\n\n\n\n<p>But since <code>stretch<\/code> is the default alignment and we have enough space inside our grid, the browser will stretch both grid cells equally to cover all that area. That\u2019s how the grid on the left winds up with two equal columns.<\/p>\n\n\n\n<p>From <a href=\"https:\/\/www.w3.org\/TR\/css-grid-1\/#grid-align\" rel=\"noopener\">the specification<\/a>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Note that certain values of <a href=\"https:\/\/www.w3.org\/TR\/css-align-3\/#propdef-justify-content\" rel=\"noopener\"><code>justify-content<\/code><\/a> and <a href=\"https:\/\/www.w3.org\/TR\/css-align-3\/#propdef-align-content\" rel=\"noopener\"><code>align-content<\/code><\/a> can cause the tracks to be spaced apart (<a href=\"https:\/\/www.w3.org\/TR\/css-align-3\/#valdef-align-content-space-around\" rel=\"noopener\"><code>space-around<\/code><\/a>, <a href=\"https:\/\/www.w3.org\/TR\/css-align-3\/#valdef-align-content-space-between\" rel=\"noopener\"><code>space-between<\/code><\/a>, <a href=\"https:\/\/www.w3.org\/TR\/css-align-3\/#valdef-align-content-space-evenly\" rel=\"noopener\"><code>space-evenly<\/code><\/a>) or to be resized (<a href=\"https:\/\/www.w3.org\/TR\/css-align-3\/#valdef-align-content-stretch\" rel=\"noopener\"><code>stretch<\/code><\/a>).<\/p><\/blockquote>\n\n\n\n<p>Note the \u201cto be resized\u201d which is the key here. In the last example, I used <code>place-content<\/code> which is the shorthand for <code>justify-content<\/code> and <code>align-content<\/code><\/p>\n\n\n\n<p>And this is buried somewhere in <a href=\"https:\/\/www.w3.org\/TR\/css-grid-1\/#algo-stretch\" rel=\"noopener\">the Grid Sizing algorithm<\/a> specs:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>This step expands tracks that have an <a href=\"https:\/\/www.w3.org\/TR\/css-grid-1\/#valdef-grid-template-columns-auto\" rel=\"noopener\">auto<\/a> <a href=\"https:\/\/www.w3.org\/TR\/css-grid-1\/#max-track-sizing-function\" rel=\"noopener\">max track sizing function<\/a> by dividing any remaining positive, <a href=\"https:\/\/www.w3.org\/TR\/css-sizing-3\/#definite\" rel=\"noopener\">definite<\/a> <a href=\"https:\/\/www.w3.org\/TR\/css-grid-1\/#free-space\" rel=\"noopener\">free space<\/a> equally amongst them. If the free space is <a href=\"https:\/\/www.w3.org\/TR\/css-sizing-3\/#indefinite\" rel=\"noopener\">indefinite<\/a>, but the <a href=\"https:\/\/www.w3.org\/TR\/css-grid-1\/#grid-container\" rel=\"noopener\">grid container<\/a> has a definite <a href=\"https:\/\/www.w3.org\/TR\/CSS2\/visudet.html#propdef-min-width\" rel=\"noopener\">min-width\/height<\/a>, use that size to calculate the free space for this step instead.<\/p><\/blockquote>\n\n\n\n<p>\u201cEqually&#8221; explains why we wind up with equal grid cells, but it applies to \u201cthe free space\u201d which is very important.<\/p>\n\n\n\n<p>Let\u2019s take the previous example and add content to one of the <code>div<\/code>s:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzaWKLy\/fafb5ed1e0f73bb07f99bbd8feca8c1a\" src=\"\/\/codepen.io\/anon\/embed\/YzaWKLy\/fafb5ed1e0f73bb07f99bbd8feca8c1a?height=350&amp;theme-id=1&amp;slug-hash=YzaWKLy\/fafb5ed1e0f73bb07f99bbd8feca8c1a&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzaWKLy\/fafb5ed1e0f73bb07f99bbd8feca8c1a\" title=\"CodePen Embed YzaWKLy\/fafb5ed1e0f73bb07f99bbd8feca8c1a\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>We added a square <code>50px<\/code> image. Here\u2019s an illustration of how each grid in our example responds to that image:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"599\" height=\"280\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_01F8E5AC73A410E2BD248A1E8BF44B1521B06E917569E7B737C2E757E4896704_1657404278772_image.png?resize=599%2C280&#038;ssl=1\" alt=\"\" class=\"wp-image-367209\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_01F8E5AC73A410E2BD248A1E8BF44B1521B06E917569E7B737C2E757E4896704_1657404278772_image.png?w=599&amp;ssl=1 599w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_01F8E5AC73A410E2BD248A1E8BF44B1521B06E917569E7B737C2E757E4896704_1657404278772_image.png?resize=300%2C140&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>In the first case, we can see that the first cell (in red) is bigger than the second one (in blue). In the second case, the size of the first cell changes to fit the physical size of the image while the second cell remains with no dimensions. The free space is divided equally, but the first cell has more content inside which makes it bigger.<\/p>\n\n\n\n<p>This is the math to figure out our free space:<\/p>\n\n\n\n<pre rel=\"\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">(grid width) - (gap) - (image width) = (free space)\n200px - 5px - 50px = 145px <\/code><\/pre>\n\n\n\n<p>Divided by two \u2014 the number of columns \u2014 we get a width of <code>72.5px<\/code> for each column. But we add the size of the image, <code>50px<\/code>, to the first column which leaves us with one column at <code>122.5px<\/code> and the second one equal to <code>72.5px<\/code>.<\/p>\n\n\n\n<p>The same logic applies to our grid of images. All the images have a size equal to <code>0<\/code> (no content) while the hovered image contributes to size \u2014 even if it\u2019s just <code>1px<\/code> \u2014 making its grid cell bigger than the others. For this reason, the scale factor can be any value bigger than <code>0<\/code> even decimals between <code>0<\/code> and <code>1<\/code>.<\/p>\n\n\n\n<p>To get the final width of the grid cells, we do the same calculation to get the following:<\/p>\n\n\n\n<pre rel=\"\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">(container width) - (sum of all gaps) - (hovered image width) = (free space)<\/code><\/pre>\n\n\n\n<p>The width of container is defined by:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">var(--m)*var(--w) + (var(--m) - 1)*var(--g)<\/code><\/pre>\n\n\n\n<p>\u2026and all the gaps are equal to:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">(var(--m) - 1)*var(--g)<\/code><\/pre>\n\n\n\n<p>\u2026and for the hovered image we have:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">var(--w)*var(--f)<\/code><\/pre>\n\n\n\n<p>We can calculate all of that with our variables:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">var(--m)*var(--w) - var(--w)*var(--f) = var(--w)*(var(--m) - var(--f))<\/code><\/pre>\n\n\n\n<p>The number of columns is defined by <code>--m<\/code> ,so we divide that free space equally to get:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">var(--w)*(var(--m) - var(--f))\/var(--m)<\/code><\/pre>\n\n\n\n<p>\u2026which gives us the size of the non-hovered images. For hovered images, we have this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">var(--w)*(var(--m) - var(--f))\/var(--m) + var(--w)*var(--f)\nvar(--w)*((var(--m) - var(--f))\/var(--m) + var(--f))<\/code><\/pre>\n\n\n\n<p>If we want to control the final size of the hovered image, we consider the above formula to get the exact size we want. If, for example, we want the image to be twice as big:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">(var(--m) - var(--f))\/var(--m) + var(--f) = 2<\/code><\/pre>\n\n\n\n<p>So, the value of our scale multiplier, <code>--f<\/code>, needs to be equal to:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">var(--m)\/(var(--m) - 1)<\/code><\/pre>\n\n\n\n<p>For three columns we will have <code>3\/2 = 1.5<\/code> and that\u2019s the scale factor I used in the first demo of this article because I wanted to make the image twice as big on hover!<\/p>\n\n\n\n<p>The same logic applies to the height calculation and in case we want to control both of them independently we will need to consider two scale factors to make sure we have a specific width and height on hover.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.gallery {\n  \/* same as before *\/\n   --fw: 1.5; \/* controls the scale factor for the width *\/\n   --fh: 1.2; \/* controls the scale factor for the height *\/\n\n  \/* same as before *\/\n}\n\n.gallery img:hover{\n  width:  calc(var(--w)*var(--fw));\n  height: calc(var(--h)*var(--fh));\n}<\/code><\/pre>\n\n\n\n<p>Now, you know all the secrets to create any kind of image grid with a cool hover effect while also having control of the sizing you want using the math we just covered.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"wrapping-up\">Wrapping up<\/h3>\n\n\n<p>In my <a href=\"https:\/\/css-tricks.com\/exploring-css-grids-implicit-grid-and-auto-placement-powers\">last article<\/a>, we created a complex-looking grid with a few lines of CSS that put CSS Grid\u2019s implicit grid and auto-placement features to use. In this article, we relied on some CSS Grid sizing trickery to create a fancy grid of images that zoom on hover and cause the grid to adjust accordingly. All of this with a simplified code that is easy to adjust using CSS variables!<\/p>\n\n\n\n<p>In the next article, we will play with shapes! We will combine CSS grid with mask and clip-path to get fancy grid of images.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating a grid of images is easy, thanks to CSS Grid. But making the grid do fancy things after the images have been placed can be tricky to pull off. Say you want to add some fancy hover effect to the images where they grow and zoom beyond the rows and columns where they sit? [&hellip;]<\/p>\n","protected":false},"author":281881,"featured_media":367211,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"","jetpack_publicize_message":"Zooming Images in a Grid Layout by @ChallengesCSS","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[686,1373,19051],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/grid-zoom-image.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":374826,"url":"https:\/\/css-tricks.com\/css-grid-and-custom-shapes-part-3\/","url_meta":{"origin":367204,"position":0},"title":"CSS Grid and Custom Shapes, Part 3","date":"November 11, 2022","format":false,"excerpt":"After Part 1 and Part 2, I am back with a third article to explore more fancy shapes. Like the previous articles, we are going to combine CSS Grid with clipping and masking to create fancy layouts for image galleries. CSS Grid and Custom Shapes series Part 1Part 2Part 3\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/Screen-Shot-2022-11-01-at-12.11.28-PM.png?fit=1200%2C746&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":367324,"url":"https:\/\/css-tricks.com\/css-grid-and-custom-shapes-part-1\/","url_meta":{"origin":367204,"position":1},"title":"CSS Grid and Custom Shapes, Part 1","date":"August 15, 2022","format":false,"excerpt":"In a previous article, I looked at CSS Grid's ability to create complex layouts using its auto-placement powers. I took that one step further in another article that added a zooming hover effect to images in a grid layout. This time, I want to dive into another type of grid,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/FD3186CB-2199-4F34-8B68-D013284C35FC.jpeg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":376528,"url":"https:\/\/css-tricks.com\/animating-css-grid-how-to-examples\/","url_meta":{"origin":367204,"position":2},"title":"Animating CSS Grid (How To + Examples)","date":"January 25, 2023","format":false,"excerpt":"I\u2019m pleased to shine a light on the fact that the CSS grid-template-rows and grid-template-columns properties are now animatable in all major web browsers! Well, CSS Grid has technically supported animations for a long time, as it\u2019s baked right into the CSS Grid Layout Module Level 1 spec. But animating\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/grid-animation.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":372396,"url":"https:\/\/css-tricks.com\/css-grid-and-custom-shapes-part-2\/","url_meta":{"origin":367204,"position":3},"title":"CSS Grid and Custom Shapes, Part 2","date":"August 22, 2022","format":false,"excerpt":"Alright, so the last time we checked in, we were using CSS Grid and combining them with CSS clip-path and mask techniques to create grids with fancy shapes. Here's just one of the fantastic grids we made together: CodePen Embed Fallback CSS Grid and Custom Shapes series Part 1Part 2\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/zig-zag-panel.png?fit=1104%2C492&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":306022,"url":"https:\/\/css-tricks.com\/a-grid-of-logos-in-squares\/","url_meta":{"origin":367204,"position":4},"title":"A Grid of Logos in Squares","date":"April 6, 2020","format":false,"excerpt":"Let's build a literal grid of squares, and we'll put the logos of some magazines centered inside each square. I imagine plenty of you have had to build a logo grid before. You can probably already picture it: an area of a site that lists the donors, sponsors, or that\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/grid-of-logos.png?fit=1200%2C902&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":372952,"url":"https:\/\/css-tricks.com\/how-i-made-a-pure-css-puzzle-game\/","url_meta":{"origin":367204,"position":5},"title":"How I Made a Pure CSS Puzzle Game","date":"September 9, 2022","format":false,"excerpt":"I recently discovered the joy of creating CSS-only games. It\u2019s always fascinating how HTML and CSS are capable of handling the logic of an entire online game, so I had to try it! Such games usually rely on the ol\u2019 Checkbox Hack where we combine the checked\/unchecked state of a\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/puzzle-article.png?fit=1200%2C604&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/367204"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/281881"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=367204"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/367204\/revisions"}],"predecessor-version":[{"id":372333,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/367204\/revisions\/372333"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/367211"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=367204"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=367204"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=367204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}