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

Styling the background of a container in CSS using Bootstrap

Currently, I am utilizing bootstrap and trying to find an elegant solution for adding a background to my container. Specifically, I am working with the bootstrap class container, as opposed to container-fluid. The official Bootstrap documentation advises ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Displaying a message text upon successful AJAX request

I have a web page with an AJAX request that updates data in the database. After the update, I want to display a message to the user on the webpage confirming that the data has been successfully updated. However, currently, no message is being displayed and ...

javascriptphphtmlajax

If the SASS condition matches the variable for the background color, then

I attempted to create a conditional statement in my component using Sass @if and @else. The condition I set was that if background == var(--bg-danger), the color should be white. However, it only returned white and did not trigger the else condition. @mixi ...

cssvue.jssass

Is there a way to maintain scroll position on a dynamically refreshing div?

After searching for hours, I still can't find a solution to my problem. I am using a simple JQuery script to refresh a div and display my PHP output in it. $script = " <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery ...

javascripthtmlajaxscroll

Adjusting the color of a value in justGage requires a few simple steps to

Is it possible to modify the color and design of the text in the Value parameter of justGage after creating the gauge? My goal is to change the text color to blue with an underline to give it a link-like appearance. Appreciate your assistance. ...

javascriptcsshtmlraphaeljustgage

What is the best way to customize the appearance of the initial row in each tr cluster?

Looking to add a button for expanding child rows within a datatable, with each group in the table having the same child elements.... The provided CSS currently displays the icon on every row throughout the entire table. td.details-control { backg ...

htmlcssdatatablesgrouping

Place CSS elements in relation to the underlying element

This is an example of my HTML structure: <nav id="menu"> <ul> <li><a href="">Products</a></li> <li><a href="">Offers</a></li> <li><a href="">References</a>& ...

csshtml

Algorithm that continuously increases a given date by 3 months until it surpasses or matches the specified creation date

I am currently working with QuickBase, a platform that involves HTML. My goal is to develop a code that can take a [fixed date] (always in the past) and increment it by 3 months until the MM/YYYY exceeds or equals the MM/YYYY of the [creation date]. Once t ...

javascripthtmldateif-statementquickbase

Tips on customizing image borders/masks with hover effects

Is there a React library or a simple CSS trick to create an image's canvas cropping effect on hover? For example, similar to this: Thanks in advance! ...

javascriptcssreactjs

Steps for creating interconnected datepickers in jQuery with month and year selection:To create a dependent datepicker with month and year selection using

The JSFiddle I currently have is not functioning as expected. When the user directly selects the end-date, it does not restrict the start-date in this particular fiddle. It should change once the user directly changes the end-date. The functionality works ...

javascriptjqueryhtmljquery-uidatepicker

Sorting through mongoose information on the front end using EJS depending on a dropdown pick

Beginner embarking on my inaugural project here. I have developed 2 Mongoose schematics and models for managing categories and products. The products are nested within the corresponding categories model. Using Node and Express, I successfully sent all ca ...

javascripthtmlexpressmongooseejs

jquery-powered scrollable content container

<script language="javascript"> $(document).ready(function($) { var methods = { init: function(options) { this.children(':first').stop(); this.marquee('play'); }, play: function( ...

javascriptjquerycsshtml

AngularJS radio buttons can now be selected as multiple options

Currently, I am in the process of learning angular and have implemented a radio button feature in my program. However, I have encountered a perplexing issue that I cannot seem to explain. <!DOCTYPE html> <html> <head> <meta ch ...

javascripthtmlangularjs

Switching the vertical alignment of grid items in Material UI when the page is collapsed

When the page is collapsed, the Left grid item element moves to the top of the page and the Right grid element is positioned below it. I would like to reverse this behavior so that the Right element appears on top and the Left element below when the page ...

javascriptcssreactjsmaterial-ui

Is the first child component of Material UI Stack not properly aligned?

Is there a CSS issue that needs fixing? I am working on creating a vertical list of checkboxes with labels using the <Stack /> component from Material UI. I have tried implementing this in the sandbox provided (check out demo.tsx): https://codesandb ...

cssreactjsmaterial-ui

Is there a way in CSS to enable caps lock for specific characters only?

After downloading a new font and setting font-variant: small-caps;, I noticed that my numbers appear much larger than the letters. Is there a way to apply small caps only to the letters, not the numbers? While traditionally numbers do not have a capital ...

css

What is the best way to implement CSS Background-size: cover; while also making room for a menu?

Recently, I came across the CSS property background-size: cover, but I encountered a problem. I want the area behind my navigation on the left to be black. However, when I leave black space in the image itself, it gets cropped off when the image resizes. ...

htmlimagecssbackground-image

Submitting a form and using Ajax to upload an image

Is there a way to submit an image file to php using ajax without assigning the file to a variable with onchange event? I've tried triggering the request on submit click, but keep getting the error message: "cannot read property 0 of undefined." <ht ...

javascriptjqueryhtmlajax

Is it possible to disable the save option on a PDF popup window?

When displaying a PDF using an embed tag, I have managed to disable print and content copying through document properties. However, I am struggling to find a solution to disable the save option that pops up. Is there a way to achieve this using JavaScrip ...

c#jquerycssasp.net

Display results in a Web application using Google Apps Script

function doGet() { return HtmlService.createHtmlOutputFromFile("vi"); // var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>'); } function doPost() { return HtmlService.createHtmlOutputFromFile("vi"); // var out ...

javascripthtmlwebgoogle-apps-scriptgoogle-apps