Rows within distance

There seems to be too much space between the grid rows. I tried adding more photos or adjusting the height of the .image class to 100%, but then the image gets stretched out.

The gap between items with classes .description and #gallery is too wide.

When I set the gallery height to 100%, it solves some issues, but unfortunately, it makes the gap between the grid rows even larger:

main {
  display: flex;
  text-align: center;
  margin: 0px 10px 0px;
  height: 100%;
  flex-wrap: wrap;
  flex: 1;
  overflow-y: auto;
  padding: 0px 5px;
  margin: 0px;
}

#gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50rem, 1fr));
  column-gap: 10px;
  row-gap: 10px;
  margin: 0px 30px;
  top: 0px;
  align-items: stretch;
}

.image {
  display: block;
  width: 100%;
  object-fit: cover;
  margin: 0px;
}

.description {
  font-size: 1.8rem;
  padding-top: 0px;
}
<main>
  <p class="description"> text</p>
  <div id="gallery">
    <a href="01.jpg"><img class="image"  src="https://placekitten.com/408/287" alt=""></a>
    <a href="01.jpg"><img class="image"  src="https://placekitten.com/408/287" alt=""></a>
    <a href="01.jpg"><img class="image"  src="https://placekitten.com/408/287" alt=""></a>
    <a href="01.jpg"><img class="image"  src="https://placekitten.com/408/287" alt=""></a>
  </div>
</main>

htmlcssflexboxcss-grid

Answer №1

It seems like there is an excess of CSS in your code.

Let me show you a streamlined version with fewer styles:

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 5px;
}

#gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
  column-gap: 10px;
  row-gap: 10px;
  margin: 0 30px;
}

.image {
  display: block;
  width: 100%;
  object-fit: cover;
}

.description {
  font-size: 1.8rem;
  margin: 0;
}
<main>
  <p class="description"> text</p>
  <div id="gallery">
    <a href="01.jpg"><img class="image" src="https://placekitten.com/408/287" alt=""></a>
    <a href="01.jpg"><img class="image" src="https://placekitten.com/408/287" alt=""></a>
    <a href="01.jpg"><img class="image" src="https://placekitten.com/408/287" alt=""></a>
    <a href="01.jpg"><img class="image" src="https://placekitten.com/408/287" alt=""></a>
  </div>
</main>

Understanding the box model helps a lot when working with CSS styling. One technique is outlining each element with a 1px red border to visualize the layout more clearly, as demonstrated in the next snippet.
I've also optimized the defaults for box sizing and made additional tweaks for better spacing:

* {
  box-sizing: border-box;
  outline: 1px solid red;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 5px;
}

#gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
  column-gap: 10px;
  row-gap: 10px;
  margin: 0 30px;
}

.image {
  display: block;
  width: 100%;
  object-fit: cover;
}

.description {
  font-size: 1.8rem;
  margin: 0;
}
<main>
  <p class="description"> text</p>
  <div id="gallery">
    <a href="01.jpg"><img class="image" src="https://placekitten.com/408/287" alt=""></a>
    <a href="01.jpg"><img class="image" src="https://placekitten.com/408/287" alt=""></a>
    <a href="01.jpg"><img class="image" src="https://placekitten.com/408/287" alt=""></a>
    <a href="01.jpg"><img class="image" src="https://placekitten.com/408/287" alt=""></a>
  </div>
</main>

I hope these optimizations help you achieve the desired spacing in your layout. If you need further assistance or clarification, feel free to update your question with a brief sketch of your layout goals.

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

I am experiencing some layout problems with Joomla K2

Having some alignment issues in the header section of my article. I took a screenshot, but you can also check out the live page here. See the pic below: Upon inspecting the area I wanted to adjust, I discovered: span.itemAuthorDetailss position: relativ ...

htmlcssjoomla

What is the best way to create a triangle-shaped div using CSS styling?

Seeking assistance in creating a triangular shape using CSS within a rectangular division. Grateful for any guidance provided. ...

htmlcssstyling

Having trouble positioning text alongside a checkbox in Bootstrap v3.3.6?

Dealing with the alignment of checkboxes in Bootstrap forms is driving me crazy. It seems to look almost perfect on both Chrome and IE on my desktop, where the text and checkbox are aligned almost perfectly. However, when I view it on Chrome on my tablet ...

csstwitter-bootstrap

Creating a foundational design with Bootstrap 5, featuring a sidebar that scrolls seamlessly and a stunning fixed

I'm having some trouble figuring out the layout for a webapp I want to develop. LAYOUT IMAGE What I envision is a sidebar menu on the "S" section that can be scrolled independently, and a large image on the "I" section that changes based on th ...

htmlcssbootstrap-5

What is the best way to increase the size of the input field to allow for more typing space?

My query is quite simple. Even when I set the height to 100px, the cursor still starts in the middle of the input box. I want the entire box to be utilized with the cursor starting at the top left corner for a more intuitive paragraph writing experience. ...

htmlcss

Enhancing larger elements with a combination of CSS background-image gradients and border lines

My design calls for a background image with a line at the end. The line should start right where the background size ends, and in my concept it is grey. It's important that this line remains as one cohesive element. background-image: linear-gradient( ...

htmlcss

The navbar links in Bootstrap 4 may be hidden, but the navbar brand still remains visible

I have implemented this code for my website's navbar, however, upon running it, I noticed that the navigation links are not visible. The navbar brand name "test" appears correctly, but the other links seem to be hidden. Does anyone have any insights o ...

htmlcssbootstrap-4navbar

Ways to activate the date input field and reformat it for smooth insertion or selection in mysqli

I would like to enable the input of dates in UK format - DD/MM/YYYY on an HTML form. Before any PHP code is executed, such as queries (e.g. select, insert, etc.), I want PHP to convert the entered date from DD/MM/YYYY to YYYY-MM-DD. HTML <div class="f ...

phphtmlmysqli

Several buttons converging towards a single circle

https://i.sstatic.net/NyHXu.png I attempted to create a circular layout using 6 buttons, but the end result did not form a perfect circle as intended. In the image provided, I highlighted the areas of concern in red. Below, you will find my HTML and CSS c ...

htmlcsstizen

Internal styles are effective, while external styles seem to be less efficient

For some reason, internal CSS is working fine, but external CSS just won't cooperate. I even tried using the code !important, but it's like it doesn't understand. I'm trying to incorporate a gallery into my website, but I've hit a ...

javascripthtmlcssbootstrap-4styles

Animating Divs with jQuery to Expand their Size

I am currently designing a services page for my portfolio website. The layout consists of three columns, with the central column containing a large box and the left and right columns each containing three smaller boxes. These smaller boxes function as clic ...

javascriptjqueryhtmlcss

Expanding CSS styles on hover

When my mouse pointer moves out of the red color box, it still triggers the hover function. However, I only want the hover effect to work within the red color box and hide the menu when it's outside the box. This is the source code from JSfiddle: htt ...

csshover

What is the process for updating tabs and their content in React?

Here is where the error occurs in my JavaScript code. I have successfully implemented it in HTML, CSS, and simple JavaScript, but encountered issues when trying to do so in React. My goal is to switch tabs and their corresponding data/content: ...

javascripthtmlcssreactjs

How to efficiently remove duplicate items from multiple select dropdowns in Angular using ng-repeat?

Need help with dynamically assigning objects to select boxes in AngularJS. I have a scenario where I add multiple select boxes to a form, but each box should only display items that haven't been selected in other boxes. How can I achieve this functio ...

javascripthtmlangularjsobjectdrop-down-menu

What could be causing my page width to only expand to 100% when using "fit-content"?

After searching extensively, I'm unable to find a solution that fits my current issue. My goal is to construct a practice ecommerce website using React. One of the components I have is a header which I'd like to occupy 100% of the screen width, c ...

javascriptcssreactjswidth

Hide table cells using jQuery if they do not contain a specific content

Is there a way to conceal the td elements in a table that do not have the inline CSS attribute width:12%;? See code example below. <td class="" id=""> <td class="" id=""> <td class="" id=""> <td width="12%" class="" id=""><!-- ...

jqueryhtml

Transforming jQuery into vanilla JavaScript in order to create a customized dropdown select functionality

I am struggling with converting jQuery code to pure JavaScript for a custom select element. https://codepen.io/PeterGeller/pen/wksIF After referencing the CodePen example, I attempted to implement it with 3 select elements. const select = document.get ...

javascripthtmljquery

Animation for maximum height with transition from a set value to no maximum height

While experimenting with CSS-transitions, I encountered an unusual issue when adding a transition for max-height from a specific value (e.g. 14px) to none. Surprisingly, there is no animation at all; the hidden elements simply appear and disappear instant ...

javascriptjqueryhtmlcss

Learn how to extract data located between two specific tags using Java HtmlUnit

<span> <a></a> Hello <div>A plethora of irrelevant text</div> </span> My goal is to retrieve only the "Hello" from the webpage. While I can use XPath to target the span, calling .getTextContent() also includes the text ...

javahtmlhtmlunit

Internet Explorer (on mobile devices) does not display submenus when touched

Hello, I have a query about displaying a sublist on touch. I have created a sublist that is supposed to show up when you hover over it. You can view the demo here: @import url(//fonts.googleapis.com/css?family=Titillium+Web:400,200,300,600,700); body { ...

javascriptjqueryhtmlcss