CODEWITHSUNDEEP
csscss-grid
Sensanaty
Sensanaty

Reputation: 1106

CSS Grid not using 100% of the width of the screen

Take the example snippet below:

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
}

.grid-item {
    border: 1px solid #000;
    text-align: center;
}
<div class="grid-container">
    <div class="grid-item">item 1</div>
    <div class="grid-item">item 2</div>
    <div class="grid-item">item 3</div>
</div>

The result is a table that looks like this. My problem is that I want to eliminate the 10 pixel gaps to the left, right and the top of the table, so that it covers 100% of the width (basically, I want it to start at 0, 0). The only thing that I've found that works is setting the margin to margin: -10px -10px 0 -10px; in .grid-container however that seems like the wrong way of going about it.

Am I missing something painfully obvious here?

Upvotes: 2

Views: 7219

Answers (2)

Pato Salazar
Pato Salazar

Reputation: 1477

You just need to remove the default padding and margin from the body. Browsers add their own default CSS. That is why you are seeing that padding:

Like this:-

body {
  padding: 0;
  margin: 0;
}

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
}

.grid-item {
    border: 1px solid #000;
    text-align: center;
}
    <div class="grid-container">
        <div class="grid-item">item 1</div>
        <div class="grid-item">item 2</div>
        <div class="grid-item">item 3</div>
    </div>

Check also Eric Meyer's CSS reset to remove all browser default CSS.

Eric Meyer's CSS reset

Upvotes: 6

Kosh
Kosh

Reputation: 18434

Like this?

html, body {margin:0; padding:0}

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
}

.grid-item {
    border: 1px solid #000;
    text-align: center;
}
<div class="grid-container">
    <div class="grid-item">item 1</div>
    <div class="grid-item">item 2</div>
    <div class="grid-item">item 3</div>
</div>

Upvotes: 0

Related Questions