Horizontally center grid items when there is not enough data to fill a complete row

Currently experimenting with the new CSS grid layout feature. I am struggling with aligning a variable number of images in the center of the row when there are less than six items to display. Unfortunately, my attempts to achieve this have not been successful so far. Here is an example of my CSS code, any assistance would be greatly appreciated.

#result-images{
display: grid;
grid-template-columns: 260px 260px 260px 260px 260px 260px;
grid-gap: 11px;
grid-column-gap:55px;
background-color: #959595;
border-style:solid;
border-width:3px;
border-color:#FFFFFF;

}

#result-images img{
width:100%;
height: 100%;
background-color: #363636;
display:block;
margin: 0 auto;
}

Answer №1

Flexbox can simplify the process of achieving this layout. Take a look at the example provided below.

#result-images{
display:flex;
flex-flow: row wrap;
justify-content:center;
align-content:center;
align-items:center;
border: 2px solid black;
max-width:360px;
}

#result-images img{
min-width: 120px;
max-width: 120px;
min-height: 120px;
max-height: 120px;
flex: 0 1 auto
align-self:center;
}
<section id="result-images">

<img src="https://www.gstatic.com/webp/gallery/1.jpg">
<img src="https://www.gstatic.com/webp/gallery/2.jpg">
<img src="https://www.gstatic.com/webp/gallery/3.jpg">
<img src="https://www.gstatic.com/webp/gallery/4.jpg">
<img src="https://www.gstatic.com/webp/gallery/5.jpg">


</section>

  1. List item

Answer №2

How to position an image in the center of a specified area

#result-images {
    border: 2px solid #fffff;
    border-radius: 5px;
    background-color: #959595;
}

#result-images {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a a a ."
    ". a a a a .";
}
img {
  grid-area: a;
  align-self: center;
  justify-self: center;
  width: 100px;
  height: 100px;
}
<div id="result-images">
 <img src="https://c1.staticflickr.com/2/1018/805106121_ab84d1a216_b.jpg" />
</div>

Answer №3

Try using auto-fit in combination with repeat() function

For your specific scenario, use

grid-template-columns: repeat(auto-fit, 260px)

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

New feature in Chrome allows credit card suggestions to be displayed in the name input field

On one specific page of my angular app, I have an input field for a name that is showing credit card suggestions. When I disable the autofill for credit cards in Chrome settings, it then shows suggestions for names instead. However, on another page with ...

Using a global variable to change the class of the <body> element in AngularJS

I've recently developed an angularJS application. Below is the index.html <html ng-app="MyApp"> <head> <!-- Import CSS files --> </head> <body class="{{bodylayout}}"> <div ng-view></div> < ...

Having trouble with Ajax Cross Domain functionality?

Similar Question: Ajax cross domain call Using the following code... var URLs = new Array(); var titulo = new Array(); $.ajax({ url: 'http://www.example.com.br', type: 'GET', success: functio ...

Creating a dynamic list in HTML by populating it with randomly selected words using JavaScript

Check out my awesome code snippet function wordSelect() { var words = ["Vancouver", "Whistler", "Surrey", "Victoria", "Kelowna"]; //List of randomly-selected words from above var selectedWords = []; for(let i = 0; i &l ...

Is it possible for Carousel to showcase a different layout other than tables or items? And is there a way to customize

I'm trying to use Bootstrap 5 to display items in a row, like sets of 3 or 12, and have them slide into view one set at a time. However, when I add a carousel, the items end up stacked on top of each other. Here is the code snippet: <div c ...

Ionic - Ensuring that various components occupy the entire vertical space of a parent <div> with a height of 100

Currently, I am developing an app using Ionic. My goal is to position four row elements and a button inside a div. The div occupies the entire screen with a height of `100%`, and the content within it should expand to match this full-height requirement. D ...

Middleware that handles form post requests quickly became overwhelmed and resulted in a RangeError

Currently, I am working with a form using ejs templates to collect data. When accessing the "/" route, my application renders the "main" view and utilizes a middleware to handle the form data. However, I encountered an error stating "RangeError: Maximum ca ...

Having trouble loading @font-face fonts

I am experiencing an issue where my downloaded fonts are not showing up in Chrome. I am utilizing scss which gets compiled to css using gulp. If I directly visit http://project-name.localhost/data/fnt/Shermlock.ttf I can successfully download the font. ...

What is the best way to display each element of an array individually using just Javascript?

I have created a JavaScript array randomizer that displays the elements one by one with a set interval. However, I would like to modify it so that the elements are shown one at a time upon clicking a button instead of automatically changing after an interv ...

Escape from an iframe with the help of a buster

My website is being targeted by a code that prevents it from breaking out of an iframe. Despite trying different frame breaker scripts, I have not been successful in resolving this issue. Any assistance would be greatly appreciated. Thanks! Buster: func ...

How can I use JavaScript to disable a table row and then save the selected option in a MySQL database?

I have a PHP snippet that dynamically displays table rows. Each row contains a radio button with "Yes" and "No" options. I have implemented a JS function where, upon choosing an option, a pop-up box is displayed. If the user selects the "Yes" option in t ...

When scrolling, apply a CSS class to a div element once it becomes visible on the

I'm in the process of developing a timeline feature for my website, and I am facing an issue where the addClass function is being applied to all sections, even those that are not currently visible on the screen during scrolling. If you would like to ...

Looping through a nested for loop within an HTML table

I am currently working on generating a dynamic table using Lists of varying sizes. My first list is a List of Cars List<Car>. I have successfully placed the names of different car companies in the header. Next, I have a List<List<CarSales>& ...

Leveraging jQuery for Adding Text to a Span While Hovering and Animating it to Slide from Left to

<p class="site-description">Eating cookies is <span class="description-addition"></span>a delight</p> <script> var phrases = new Array('a sweet experience', 'so delicious', 'the best treat', ...

Issue with displaying spinner in bootstrap version 4.0.0

I am having trouble implementing a spinner on my website. I have followed the code below but still can't see the spinner showing up. Can someone please help me troubleshoot this? <!-- Bootstrap CSS --> <link rel="stylesheet" href= ...

Uncovering the "parent having two child elements" structure from HTML: A guide

I want to identify all parents with two children in an HTML document. Case 1 <parent> <child> <tag></tag> </child> <child></child> </parent> Case 2 <parent> <parent_and_child> <tag& ...

How to use jQuery to swap image URLs and replace strings in the

Can anyone assist me with replacing a string in a URL image from s120 to s400? s120/demo%2Bproduct%2Blipstik.jpg to s400/demo%2Bproduct%2Blipstik.jpg //Using jQuery $(document).ready(function(){ $("#largeimage").click(function(){ $(".containe ...

How to Programmatically Disable OnClick Functionality in a Nested Div Using JavaScript and jQuery

I'm currently working on a Javascript application that allows users to enable/disable controls dynamically. While I've had success in disabling/enabling nested inputs and buttons, I'm facing an issue with disabling an onclick event within a ...

Guide onsetting up an Autocomplete textbox on a webpage using data from a database by utilizing a combination of Java servlet, jQuery, JSON objects, and an ajax request

Despite trying various methods, I am struggling to achieve this task. As a beginner in the realms of jQuery, JSON, and AJAX, I have written a servlet that connects to my database and fetches user IDs from a specific table. Additionally, I have designed a J ...

Reversing the process of raycasting in Three.js

I am in the process of setting up an interactive world map on a curved plane that allows users to rotate and highlight countries. Upon clicking on a specific country, I am able to identify the selection and display a tooltip with relevant information about ...