CODEWITHSUNDEEP
css
oversoon
oversoon

Reputation: 360

CSS3 Border/gap around grids

What code do I need to add to remove the gap between grid items and the edge of the browser window? I'm new to grids and CSS, so go easy on me.

I don't want the white border around the grid; https://codepen.io/grabthereef/pen/YrpqGP

.wrapper{
    display: grid;
    grid-template-columns: 2fr 2fr;
}

.wrapper > div{
    background:#ee0;
}

Upvotes: 0

Views: 237

Answers (2)

Rajendran Nadar
Rajendran Nadar

Reputation: 5438

It is as simple as putting this piece of code in you css fie.

body {
  margin: 0px;
  padding: 0px;
}

Working snippet

body {
  margin: 0px;
  padding: 0px;
}

.wrapper {
  display: grid;
  grid-template-columns: 2fr 2fr;
}

.wrapper>div {
  background: #ee0;
}
<div class="wrapper">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, nam.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, quia.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, nam.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, quia.
  </div>
</div>

Upvotes: 1

Kalpesh Patel
Kalpesh Patel

Reputation: 269

Add below code to your css file :

body{
  margin: 0;
}

It will remove that space around.

Upvotes: 2

Related Questions