Position a grid item in the center

Can someone help me with centering my container's item?

I am struggling to align the third item to the center using display: grid.

Previously, I attempted to use flexbox but found it to be less effective for a responsive layout.

.projetos {
  flex-direction: column;
  padding: 3rem 3%;
  text-align: center;
  justify-content: center;
}

.projetos-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  text-align: center;
}

.projetos-box img {
  width: 100%;
  max-width: 40rem;
  border-radius: 1rem;
}
<section class="projetos" id="projetos">
  <h2>Projetos <span>Recentes</span></h2>

  <div class="projetos-container">
    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>

    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>

    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>
  </div>
</section>

htmlcsscss-grid

Answer №1

  1. To achieve a 2 column layout with a gap, convert the container to flexbox using display: flex;
  2. Set flex-wrap: wrap to allow items to break into a new row when needed
  3. Determine the width of each element to create the desired layout respecting the specified gap
  4. Center the items horizontally by applying justify-content: center on the flex-container

:root {
  --gap: 2rem;
}

.projetos {
  flex-direction: column;
  padding: 3rem 3%;
  text-align: center;
  justify-content: center;
}

.projetos-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap) ; 
  justify-content: center;
}

.projetos-box {
  width: calc((100% - var(--gap)) / 2);
}

.projetos-box img {
  width: 100%;
  max-width: 40rem;
  border-radius: 1rem;
}
<section class="projetos" id="projetos">
  <h2>Projetos <span>Recentes</span></h2>

  <div class="projetos-container">
    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>

    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>

    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>
  </div>
</section>

Answer №2

You can try using the transform property, but make sure to consider a few factors.

  • Is this element standing alone in a row? (in an odd position)
  • Is this the last element in the row?
  • If both are true, move it 50% aside of its own width + (for a 2-column layout) half of the set gap.

Alternatively, you could approach this with flexbox :)

Below are some test examples to illustrate the concept, regardless of how many children are present in your grid.

.projetos {
  flex-direction: column;
  padding: 3rem 3%;
  text-align: center;
  justify-content: center;
  /* show me center */
  background: linear-gradient(to left, ivory 50%, silver 50%);
}

.projetos-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  text-align: center;
}

.projetos-box img {
  width: 100%;
  max-width: 40rem;
  border-radius: 1rem;
}

/* don't forget me */
.projetos-box:nth-child(odd):last-child {
  transform: translateX(calc(50% + 1rem));
}
<section class="projetos" id="projetos">
  <h2>Recent</span></h2>

  <div class="projetos-container">
    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>

    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>
  </div>
</section>

If you're not a fan of the transform method, you could extend the last odd element across both columns and apply an auto margin.

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

Utilizing the 'input' method to modify the key of an array object within specified elements in a Vue.js application

i am looking to implement an input field that can be used to edit the title of the currently selected element component (the selection is made by clicking). The challenge here is to have a single input that works for each individually selected element. I h ...

javascripthtmlvue.jsvue-component

Changing images dynamically using Javascript when hovering over an element

Looking to create a dynamic image switch effect on hover, where multiple images cycle through when hovered over. Each time the mouse hovers over the image, it should switch to the next in a sequence of 5 images. <img id="switch" src="img1.jpg"> $(& ...

javascriptjqueryhtml

Changing the text in a Bootstrap tool-tip

Currently encountering an issue where I am attempting to modify the text displayed in a tooltip, but it appears that the change is not taking effect. Instead, upon hovering over, you will see the text "your new title." My goal is simply to alter the text w ...

jqueryhtmltwitter-bootstrap-3

Creating responsive D3.js charts for various screen sizes and devices

After creating a chart using d3.js, I noticed that the chart does not resize when zooming in or out on the web browser window. Below is the code snippet of what I have attempted so far: <!DOCTYPE html> <html> < ...

javascripthtmlcssd3.js

Utilizing Binding Time in Angular for Enhanced Views

I am completely new to Angular JS. I have a simple question that I have been searching for answers on SO. My goal is to display the current time in real-time (refreshing every second as the clock ticks) on my view. Here's what I have tried so far: H ...

javascripthtmlangularjs

What steps can be taken to stop images from overflowing a flex-grow-1 item?

https://i.sstatic.net/1Qgec.pngHello, I'm facing an issue with my image. I am dealing with 3 sections: Main Content Image and other components (main section) Button Currently, I need to ensure that the image height is set to a maximum of 100% of the ...

htmlcssbootstrap-4

JQuery content displaying only on the first instance

<script> $(document).ready(function () { $('nav>li').hide(); $('ul').hide(); $('h2').hide(); $('a.btnDown').click(function () { $('body').css('background&apos ...

jqueryhtml

Tips for integrating Rate Yo into the database

I have been attempting to integrate Rate Yo into the database, but I am consistently encountering an error message: Undefined index: rating in C:\xampp\htdocs\bill\bill\add_rate.php on line 57 Below is the code that I have trie ...

phphtml

Steps for implementing remote modals in Bootstrap 5 using CS HTML

I'm attempting to implement a remote modal window in Bootstrap 5 with C# MVC. The endpoint for the modal partial view is configured correctly. According to this discussion on Github, all that needs to be done is to call some JavaScript. However, it ...

javascripthtmlbootstrap-5

Why is my Bootstrap table failing to be responsive?

I'm currently using Bootstrap 4 to incorporate a table into my website and encountering difficulties in making it responsive on mobile phones. Unfortunately, when viewing the table on a phone, it appears very zoomed out and not user-friendly. Can anyo ...

csstwitter-bootstrapbootstrap-4

Enhance the appearance of the popover by incorporating an arrow-like element for dismissing the

Here is some code I want to modify: https://i.stack.imgur.com/0C61Y.png I would like to add an arrow element at the top, similar to this: https://i.stack.imgur.com/pDT3s.png This will give it a popup-like appearance. Below is the CSS styling for the co ...

htmlcss

"Exploring the concept of responsive design: understanding the distinction between media query width and actual

Apologies for the lengthy description, but I want to provide as much detail as possible. I recently encountered an issue (which I managed to resolve, but the root cause eluded me). The crux of the problem was that when resizing the browser, specificall ...

jquerycsshtmlmedia-queriesmodernizr

Tips for fixing alignment problems using CSS

I am experiencing a problem where I am unable to figure out how to align the content in one column with text positioned next to it in a right-aligned format. /* Personal Details */ .personal-info { width: 90%; padding: 25px; border-bottom: 1px so ...

htmlcss

Enhancing functionality with jQuery: updating multiple input fields at

Currently, I am attempting to utilize jQuery to modify some HTML text by adjusting a slider. I have managed to accomplish this; however, I also need it to happen only if a checkbox is checked. How can I integrate both conditions and ensure that the text ch ...

javascriptjqueryhtmlcheckboxslider

Liquid 960: Bizarre Alpha/Omega Phenomenon

Currently, I am working with Fluid 960 and encountering some unexpected behavior with alpha/omega. Typically, I utilize alpha/omega to adjust left and right margins within nested grids. Oddly enough, when I use alpha/omega on a set of nested grids, the gr ...

css960.gsfluid-layout

What is the best way to bring a single object from Django into an HTML template?

Currently, I am working on a Django website project that involves two models: Gifi (which contains .gif images) and Categorite. My goal is to navigate to another HTML template with specific image information when a .gif image is clicked. Although I have ma ...

pythonhtmldjangowebdjango-queryset

Having trouble retrieving a base64 encoded image from a MySQL database using PHP

Within my MySQL database, there is a longblob field that stores a binary value representing an image uploaded through my website. I am currently attempting to retrieve the image using: <?php while($record = mysqli_fetch_assoc($result)): ?> <div&g ...

phphtmlmysql

Using jQuery to add or remove multiple classes at once

My navigation tabs use jQuery to add and remove classes for the active tab. However, I'm facing an issue where the active class is not removed when a new tab is clicked or when the user scrolls to a new section. Please refer to the following gist for ...

jqueryhtmlcss

Flipping a 2-dimensional box using CSS and incorporating cascading flex divs

*Please read the note: This question is a bit lengthy as I wanted to explain my thought process. For those who prefer not to read everything, I have created codepens for easy reference. Essentially, I am looking to achieve CSS box flipping effects like t ...

htmlcssanimationflexbox

Using the max-width property with Semantic UI Dropdown in ReactJS

I'm struggling to determine how to adjust the max-width of the Dropdown element in ReactJS. I attempted the following: .Menu Dropdown { max-width: 5rem !important; } Unfortunately, this did not work as expected. The dropdowns are taking up too m ...

javascriptcssreactjsdropdown