Is it possible to vertically displace an element within a CSS Grid cell?

Here is the code snippet:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

You can view and interact with this code on 

https://www.w3schools.com/css/tryit.asp?filename=trycss_grid

Is it possible to adjust the styling of one of the div elements or utilize another method to vertically offset one of the numbers by 15 pixels?

Specifically, how can we vertically offset the number 5 in the center cell by 15 pixels?

(I have included a mock-up image as a reference if it loads correctly).

Thank you.

https://i.stack.imgur.com/ppwl9.png Picture

htmlcss

Answer №1

To stylize the 5th element in a grid layout, you can utilize the nth-child selector and modify the padding for that specific element. Take a look at the example code provided below.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.grid-item:nth-child(5) {
  padding-bottom: 35px;
  padding-top: 5px;
}
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

Answer №2

Absolutely, feel free to apply the majority of CSS rules to grid children.

If you want to offset specific elements, simply add a separate class such as grid-item__offset, and include a rule with 15px of bottom padding:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.grid-item__offset {
  padding: 0 0 15px;
 }
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item grid-item__offset">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</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

The tabs are visible in the drawer, but the transition is not occurring

I am a beginner when it comes to using material ui. After clicking on advanced sports search, a drawer pops up. I have been trying to incorporate tabs in the drawer, but every time I click on tab two, the drawer closes. In reality, it should switch between ...

javascripthtmlreactjsreduxmaterial-ui

What is the best way to use jQuery to filter data in a table by clicking on a specific table row?

My website contains a table with player names and servers, but I want to make them clickable for filtering purposes. For instance, clicking on a player name should reload the leaderboards to show which servers that player plays on, and clicking on a server ...

javascripthtmljqueryjsonajax

Tips for positioning tables on a page

I have 4 tables and a submit button. How can I make them more compact? Maybe like this: </img> This is my HTML code: <body> <form action="/cgi-bin/form.py" id="myform"> <table class="table-fill"> ... ...

htmlcss

Implementing class styles using jQuery; however, certain styles fail to be effectively applied

As a beginner, I am experimenting with applying CSS class styles using jQuery. Specifically, I am trying to set two class attributes: color and font size. Surprisingly, only the color attribute is being applied despite both attributes being defined under t ...

jqueryhtmlcss

Is there a way to eliminate the scrollbar from the purecss navbar?

My website utilizes pure.css and the navbar has more elements than can fit on a small screen without scrolling. This results in an unwanted scrollbar appearing. I want the navbar to remain at the top so that it scrolls along with the content. However, when ...

htmlcssresponsive-designnavbaryui-pure-css

A numerical input field that removes non-numeric characters without removing existing numbers?

Currently, I have implemented the following code: <input type="text" onkeyup="this.value = this.value.replace(/\D/g, '')"> This code restricts users from entering anything other than numbers into a field on my webpage. However, I hav ...

javascriptjqueryhtml

PHP Unable to Locate the header.html File Within the Specified Directory

Currently, I am facing an issue while trying to use PHP to incorporate the same header, navigation, and footer elements on all my website pages. The problem arises when the .php file fails to recognize the header.html file for an include("/header.html") op ...

phphtmlcss

Limit 4 items per row in a flexbox layout with automatic width

I am currently using tables to display my items, but I want to switch to flexbox. However, when I tried using flexbox, the item widths were not dependent on their content. Any suggestions on how I can achieve this? Thank you in advance. Here is a snippet ...

htmlcssflexbox

Uncovering Inline Styles Infused with Javascript for Effective Debugging of Javascript Code

SITUATION: I have recently inherited a website from the previous developer who has scattered important functions across numerous lengthy JS files. I am struggling to track down the source of an inline CSS style within the JS or identify which function is d ...

javascripthtmlcssdebugginggoogle-chrome-devtools

Retrieve data from the controller of the selected element on the subsequent page using AngularJS

Currently, I am in the process of developing an ecommerce platform using angularjs. In my controller, I have a list of various products structured like this: $scope.products = [ {imgLink: 'product1.jpg', name: 'Wingtip Cognac Oxford&apo ...

javascriptjqueryhtmlangularjs

Where can I find a style element using Selenium in Python?

Hey there! I'm looking to find a style element or style elements using Selenium in Python. <div style="flex-direction: column; padding-bottom: 65px; padding-top: 0px;"> I've tried various methods such as: self.driver.find_element ...

pythonhtmlseleniumselenium-webdriverxpath

Is there a way to increase the spacing between the titles of these progress bars?

Ensure your responsiveness by enabling the Toggle Device Toolbar on your browser I'm attempting to create a progress bar, but I'm facing some challenges. Firstly, I want to increase the height of the semi-transparent black background, but I can& ...

htmlcssprogress-barspacing

Safari browser: Navigate with rtl/lrt direction

I created a webpage with right to left (rtl) direction. Below is the html tag I used: <html dir="rtl"> However, I needed two parts of the webpage to be written from left to right (ltr), so I added the dir attribute to this div: <div dir="ltr"&g ...

htmlcssright-to-leftbidi

Problem with jQuery image gallery

Currently, I am in the process of creating a simple image gallery that enlarges an image when it is clicked. To achieve this functionality, I am utilizing jQuery to add and remove classes dynamically. $(".image").click(function() { $(this).addClass("b ...

jqueryhtmlcss

Changing the color of the collapsed icon for accordion buttons in Bootstrap 5

I've been attempting to alter the color of Bootstrap 5's accordion's "accordion-button" when it's collapsed. I tested the following code, but it only changes the background and not the icon color of the button. .accordion-but ...

cssbootstrap-5bootstrap-icons

Create SCSS to style multiple CSS classes

Are there more efficient ways to create css helper classes like the ones shown below? Can I use scss to generate cleaner and better classes? Thank you. .m-1 { margin: 1px !important; } .m-2 { margin: 2px !important } .m-3 { margin: 3px !important } .m-4 ...

csssass

When using flexgrid, be aware that adjacent divs on the same row may shift position when applying floats

Struggling with aligning the divs in a row when floating one of them? Here's a snippet to illustrate the issue: .flex-grid { display: flex; justify-content:space-between; } .flex-grid .rcorners1 { border-radius: 25px; background: green; ...

htmlcssflexbox

The dimensions of my textarea and input field are different

Just starting out with HTML and CSS here. I'm trying to use flexbox to create a form, but the width of my input fields and text area is off for some reason. Any ideas on what might be missing from my code? Thanks in advance! Here's the CSS I&apo ...

htmlcss

Display a modal pop-up containing HTML content

I recently started building a small website using Zurb Foundation. I have created a basic grid layout with large metro style div thumbnails (about 10 on the page). Now, I want to enhance user interaction by implementing modal windows that appear when a th ...

javascriptjqueryhtmlcssmodal-dialog

Is your Bootstrap input displaying the has-error class with a glyphicon, but the alignment is not vertically centered?

What is the reason for the misalignment of glyphicon-warning-sign form-control-feedback vertically in the code below after applying font-size: 20px; to the label? <div class="container"> <div class="content align-left contact"> ...

javascriptjqueryhtmlcsstwitter-bootstrap