Design a layout consisting of a grid with items that maintain a set maximum width while being evenly distributed across the entire width of the device

I'm trying to create a grid with 2 rows and 3 columns, each cell having an image with a max-width of 512px. I added margin to the grid but now the cells are larger than the content. How can I achieve the same visual appearance as flexbox's justify-content: space-between with a grid? Is there a workaround like "gap: auto"?

Here is my current code:

#grid {
    margin: 0 3.75rem;
    display: grid;
    grid-template:
    "1 2 3" auto
    "4 5 6" auto / 1fr 1fr 1fr;
    width: 100%;
}

.gridItem {
    height: 56rem;
    border: 1px solid #000000;
}

.img {
    width: 100%;
    max-width: 512px;
    height: auto;
    border: 1px dashed #cb34ed;

}
<div id="grid">
    <div id="1" class="gridItem"><div class="img"></div></div>
    <div id="2" class="gridItem"><div class="img"></div></div>
    <div id="3" class="gridItem"><div class="img"></div></div>
    <div id="4" class="gridItem"><div class="img"></div></div>
    <div id="5" class="gridItem"><div class="img"></div></div>
</div>

I've tried splitting them into flexbox rows with justify-content: space-between, but I really need it to work in a grid layout. Any ideas on how to achieve this?

htmlcsscss-grid

Answer №1

Learn how to utilize the functional notation of nth-child by referring to the resources provided here and here. Experiment with the following settings:

  • justify-items: center; for the grid itself
  • justify-self: start; for every third grid item starting from the first one
  • justify-self: end; for every third grid item starting from the third one

#grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1em;
  justify-items: center;
  border: 2px solid cyan;
}

.gridItem {
  border: 2px solid red;
  height: 10rem;
}

/* for every 3rd item starting with the first one */
.gridItem:nth-child(3n+1) {
  border: 2px solid yellow;
  justify-self: start;
}

/* for every 3rd item starting with the third one */
.gridItem:nth-child(3n+3) {
  border: 2px solid blue;
  justify-self: end;
}

.gridItem img {
  width: 100px;
}
<div id="grid">
    <div id="1" class="gridItem"><img src="https://shotkit.com/wp-content/uploads/2020/08/night-landscape-photography-featured.jpg"></div>
    <div id="2" class="gridItem"><img src="https://shotkit.com/wp-content/uploads/2020/08/night-landscape-photography-featured.jpg"></div>
    <div id="3" class="gridItem"><img src="https://shotkit.com/wp-content/uploads/2020/08/night-landscape-photography-featured.jpg"></div>
    <div id="4" class="gridItem"><img src="https://shotkit.com/wp-content/uploads/2020/08/night-landscape-photography-featured.jpg"></div>
    <div id="5" class="gridItem"><img src="https://shotkit.com/wp-content/uploads/2020/08/night-landscape-photography-featured.jpg"></div>
</div>

If you're open to using auto for column widths instead of 1fr, consider implementing justify-content: space-between; similar to flexbox. This approach offers a straightforward solution.

#grid {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 1em;
  justify-content: space-between;
  border: 2px solid cyan;
}

.gridItem {
  border: 2px solid red;
  height: 10rem;
}

.gridItem img {
  width: 100px;
}
<div id="grid">
    <div id="1" class="gridItem"><img src="https://shotkit.com/wp-content/uploads/2020/08/night-landscape-photography-featured.jpg"></div>
    <div id="2" class="gridItem"><img src="https://shotkit.com/wp-content/uploads/2020/08/night-landscape-photography-featured.jpg"></div>
    <div id="3" class="gridItem"><img src="https://shotkit.com/wp-content/uploads/2020/08/night-landscape-photography-featured.jpg"></div>
    <div id="4" class="gridItem"><img src="https://shotkit.com/wp-content/uploads/2020/08/night-landscape-photography-featured.jpg"></div>
    <div id="5" class="gridItem"><img src="https://shotkit.com/wp-content/uploads/2020/08/night-landscape-photography-featured.jpg"></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Show the meta-field mp3 and place it in a lightbox container on the portfolio page

My Current Portfolio Gallery Setup: Currently, my portfolio gallery is displayed in a masonry grid format using the JIG plugin. This grid showcases images from my custom post_type. When clicking on a thumbnail, a lightbox pops up showing the full photo. T ...

javascriptphpjqueryhtmlwordpress

Creating fluid designs for my boxes with CSS to enhance responsiveness

I have designed my HTML file with 8 boxes that appear correctly on desktop, but when viewed on mobile devices, the columns are misaligned and shifted to the right side instead of being centered. How can I make it more responsive? See Preview Here is the ...

css

Using jQuery AJAX, the value of a server-side control (textbox) can be easily set

After working with the code below, I noticed that I can only set the value received from an ajax call if I am using HTML controls like buttons and text boxes. If I try to use asp server controls such as a button, the ajax call does not return any output, e ...

javascriptjqueryhtmlasp.netajax

Determine the Height of the Container once the Font File has Finished Loading

When styling a website with a unique font using @font-face, the browser must download the font file before it can display the text correctly, similar to how it downloads CSS and JavaScript files. This poses an issue in Chrome (v16.0.912.63) and Safari (v5 ...

javascriptjquerycssfont-face

Enhance your table with custom styling by incorporating the seanmacisaac table and placing the tbody within a div

I am looking to make adjustments to a Jquery sortable, searchable table created by seanmacisaac. For more information, visit the link: Does anyone know how to set the height of the tbody to a fixed value while allowing vertical scrolling (overflow-y)? & ...

javascriptjquerycssscrollhtml-table

My HTML loop is functioning properly with a variable, however, it is not working as expected

Hi there! Here is a piece of code that includes a loop with a timer. I am trying to change a variable using a button, however, it's not working as expected. <!doctype html> <html> <body> <script> var timer = 1000; var counter ...

htmlloops

No changes occur within this JavaScript code

I am currently working on a piece of Java Script code: document.onreadystateChange = function() { if (document.readystate === "complete") { var menu = document.getElementsByClassName('menu'); var b0 = menu[0]; b0.addE ...

javascripthtml

The Bootstrap modal simply fades away without ever making an appearance

My bootstrap modal is not displaying on desktop, only showing a faded screen. It works fine on mobile and tablet devices. Any ideas why this might be happening? Here is the code: <button type="button" class="btn btn-primary" data-to ...

javascripthtmljquerycsstwitter-bootstrap

What is the best way to horizontally align an inline div using CSS?

Is it possible to apply CSS to center an inline div that has an unknown width? Note: The width of the div cannot be specified beforehand. ...

csshtmlcenter

Insert straight lines between elements in an inline list

I am working on building a step progress bar using the HTML code below: .fa-check-circle { color: #5EB4FF; } .fa-circle { color: #CFD7E6; font-size: 14px; } .container { width: 100%; position: absolute; z-index: 1; margin-top: 20px; } . ...

htmlcssflexboxfont-awesome

Unexpected issue with sliding menu toggle implementation

I have been struggling to make a menu slide to the left when a button is clicked, and then slide back to its original position when the same button is clicked again. Although I have been using the toggle method, it doesn't seem to be working for me. I ...

javascriptjqueryhtmlcss

What is the best way to use regex to target only the content within a particular set of tags?

While there have been numerous similar inquiries posed before, mine pertains to a specific selection within the tags. I am not interested in extracting the entire content between <a href and </a>, but rather just targeting the "> within th ...

htmlregexbashsedpcre

Tips for Choosing Two Classes Using CSS

I'm currently exploring ways to select two classes so that when one of them is hovered over, a specific animation will occur. Here is my latest attempt: .news1 { -webkit-filter: blur(3px); filter: blur(3px); -webkit-transition: .3s ease-i ...

htmlcss

Delay the execution using Javascript/jQuery, remove the last element from the DOM

Within a jQuery AJAX call, I am using a $.each() loop. Each element in the response data triggers the addition of a portion of HTML to a container class in my index.html file. To view the code and ensure proper formatting, visit the codepen here as the pa ...

javascriptjqueryhtmlcss

How to apply hover effect to an image within a div using TailwindCSS

Is there a way to animate only the image and not the entire card (div) when hovering over it? I want specifically for the image to perform an animation, such as bounce effect. I'm using next/image for displaying the image. Can this animation be achie ...

cssnext.jstailwind-css

Transform the styles from a React component into Cascading Style Sheets

I have been tasked with transitioning all the styles from the JavaScript file to the CSS file while ensuring the design remains intact. I am facing an issue where using the CSS styles breaks the search field design. The original design can be seen here: S ...

javascriptcssreactjs

Mastering the correct application of flex properties within nested flex containers

I'm struggling with utilizing flexbox properly and would like some clarification on how nesting parent and child elements functions. I understand that the child elements inherit the parent's flex properties, but I'm unsure if this inheritan ...

htmlcssflexbox

One CSS file linked, but only one is applied; the other is left unused

After including two CSS files, I am experiencing an issue where only one of them is being utilized. The other file does not seem to be included and the reason behind this remains unknown. My website has a standard header file that is present on all pages. ...

css

Ways to generate a unique link for every value in an option tag dynamically?

I'm currently working on a form that allows customers to buy an online service. Within the form, there's a dropdown list featuring 'select' and 'option' tags. This dropdown menu lets users pick a billing cycle (6 months, 1 ...

htmltagshtml-select

I'm looking to make some adjustments to my export button (btnExport) in C# - what changes can I

This is the code I wrote for a basic program that exports data from a Datatable to a CSV file. The program functions as a website used to manage a database and convert it into a .csv file with the click of an export button. using System; using System.Coll ...

c#htmlcsvdatatableexport