Remove the boundaries from the grid and only retain the box

I am not skilled in css, but I simply want to eliminate the interior edges of the box and retain only the outer edges.

.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;
}
<h1>Grid Elements</h1>
<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>
<p>Direct child element(s) of the grid container automatically becomes grid items.</p>
<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>

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

htmlcss

Answer №1

One way to achieve this is by eliminating the border on the grid items and utilizing the outline property on the container:

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

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
<h1>Grid Elements</h1>
<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>
<p>Direct child element(s) of the grid container automatically becomes grid items.</p>
<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

Are you seeking this specific solution?

In order to achieve this, simply create a container box with a border.

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

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

.container {
  border: 1px solid rgba(0, 0, 0, 0.8);
  grid-template-columns: auto auto auto;
  display: grid;
}
<h1>Grid Elements</h1>
<p>A Grid Layout requires a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>
<p>Any direct child element(s) of the grid container automatically become grid items.</p>
<div class="grid-container">
  <div class="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>
</div>

Answer №3

If you want to update your code, consider making the following changes:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 0 10px #2196F3;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
<h1>Grid Elements</h1>
<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>
<p>Direct child element(s) of the grid container automatically becomes grid items.</p>
<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>

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 way in which the DOM responds to adding or deleting elements from its structure

My typical method for displaying a popup involves adding an empty div tag and a button to the webpage: <div id="popupDiv"></div> <input type="button" id="popupButton" /> I then use jQuery to handle a button click event, make an ajax cal ...

javascriptjqueryhtmldom

What is the correct way to horizontally center a Material icon within a div?

How do I correctly center a Material Design icon within a div to fix the gap issue? I have tried using text-align on the items div, but it hasn't worked. (Refer to screenshots for clarification) @import url('https://fonts.googleapis.com/css2? ...

htmlcss

Ensure that the <td> element remains within the confines of the window

When creating a table with some content, I encountered an issue where long strings would extend beyond the window. I attempted to set max-width: 80%; to limit the length, and also tried setting td, th = width: 240px;, but the problem persisted. Next, I ex ...

htmlcsstwitter-bootstraphtml-table

Why is Chrome not enforcing the maximum attribute for input type number in HTML5?

I'm encountering an issue with the following code snippet: <input type="number" max="99" /> While using Google Chrome (and possibly other webkit browsers), it appears that the spinner's up arrow is restricted from going over 99. However, ...

formshtmlgoogle-chrome

Steps to display the datatable footer on the printed page

I am having trouble understanding the solutions provided for my table query. The current table setup is as follows: <table class="table table-bordered make_datatable"> <thead> <tr> <th>SL No</th> ...

javascriptjqueryhtml

The error detected in the W3Schools validator pertains to CSS for audio elements that do not contain

Could somebody kindly explain why this code is being flagged as an error on w3schools? audio:not([controls]) { display: none; height: 0; } ...

cssaudiocontrols

Guide to adjusting margin size according to specific screen size thresholds?

I've set up a series of reactstrap cards that are dynamically organized into rows. On "md" screen sizes and larger (bootstrap), there will be 3 cards per row, while fewer screens will display 2 cards. Here's the component: <Card outline ...

htmlcssreactjsbootstrap-4

Styling elements conditionally in React JS using inline styles

If the status of this task is 'Completed', I would like to hide the button (similar to adding a display: none property). Code: <Button size="small" style={{display:this.state.task.status == "Completed" ? "none":""}} ...

reactjscssmaterial-ui

Having trouble with jQuery field validation not functioning as expected?

I'm trying to implement user input validation when the submit button is clicked, but I can't seem to get it to work. Using jQuery $(document).ready(function() { function validateForm() { if ($('#u').value() == '') ...

jqueryhtmlvalidation

A fresh javascript HTML element does not adhere to the css guidelines

While attempting to dynamically add rows to a table using Javascript and jQuery, I encountered an issue. Here is my code: <script> $(document).ready(function(){ for (i=0; i<myvar.length; i++){ $("#items").after('<tr class="item- ...

javascriptjqueryhtmlcss

Maximizing the efficiency of critical rendering path while utilizing bootstrap

Is it feasible to enhance the critical rendering path (like Google and Facebook) while utilizing Bootstrap 3? Facebook opted for inlining styles connected to the header and sidebars. Meanwhile, Google inlined all styles since they have minimal styles for ...

csstwitter-bootstrap-3

Looking to implement a CSS effect that will hide content without removing the space it occupies on the page?

Is there a way to hide specific buttons within the right column of a 3-column table display? I am currently utilizing jQuery to achieve this function. The purpose behind hiding these buttons is to prevent any quick clicks that might interfere with the fa ...

javascriptjqueryhtmlcsshide

Assign a unique HTML attribute to a child element within a Material-UI component

Currently, I am trying to include the custom HTML5 attribute "data-metrics" in the span element within the ListItemText Material UI component. However, I am facing some difficulty achieving this as per the specifications outlined in the Component API Docum ...

javascripthtmlreactjsmaterial-ui

Tips for submitting a form using javascript while preventing the default action

Looking for a way to submit a form in Javascript and prevent the default action? Let's explore how you can achieve this. Initially, my HTML form with the ID "contact_form" had an input element like so: <input id="contact_send_msg" type="submit" val ...

javascripthtmlajaxforms

"Utilizing lightbox JS to produce a centralized overlay across the entire webpage

Currently in the process of redesigning a gallery for a client at www.stagecraft.co.uk/gallery.html I am encountering some challenges with my overlay. I want it to be centered and on top of any divs that are currently in view, as new images from the clie ...

jquerycssoverlaylightbox

Unable to set CSS image as background

Currently, I am in the process of developing a website using HTML 5, CSS, and JavaScript. However, I am encountering an issue with image manipulation on the site. I am attempting to make the image the background but every method I try seems to be lacking a ...

htmlcssimagecss-position

Text is not visible when hovering over it

I am facing an issue with the hover effect on my menu element. When I hover over the element, the text does not appear as expected. Even after using z-index to position the text on top, it still doesn't work. Here is a snippet of my code: HTML: < ...

css

The text alongside the radio button is not aligned vertically

Hello, I am attempting to vertically align text next to my radio button but encountering some issues. .radio { cursor: pointer; display: inline-flex; } .cui-a-radio-button__input { display: none; } .cui-a-radio-button__input:disabled + .cui-a-rad ...

htmlcss

Issue: The system does not recognize 'cleancss' as an internal or external command

After successfully installing clean-css via npm command line, I was eager to start using it to concatenate and minify some css files. However, my excitement quickly turned to frustration when I encountered this error: 'cleancss' is not recognize ...

cssnode.jscommand-linenpm

Could someone shed some light on why hjk fails to print whenever I click?

Why is the code not printing 'hgk' every time I click? The debounce function should run and print 'hgk' each time the button is clicked. Can someone please explain why this is not happening? const debounce=(fn,delay)=>{ ...

javascripthtmlreactjsdomdom-events