2

Can a grid be declared on the <body> element?

My concern is that using a wrapper <div> can leave some unwanted padding / margins if you want the content to be flush with edges of the browser.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Stephen Selvey
  • 353
  • 2
  • 3
  • 11
  • 1
    You can, but I generally find it's not a good idea. The rest just requires a decent CSS Reset to remove the default paddings & margin. - https://stackoverflow.com/questions/30208335/removing-body-margin-in-css – Paulie_D Jun 22 '18 at 15:25
  • 1
    @Paulie_D any reason it's not generally a good idea? – Timmeh Mar 17 '21 at 18:00
  • 1
    @Paulie_D Also curious why it is generally not a good idea? – kexxcream Jun 08 '21 at 17:20

2 Answers2

4

Just add the universal selector (*) to your CSS, this will apply any rule to every element on the page. If any elements need them you can then add margins or padding to those elements themselves. This helps get rid of spacing when you can't quite tell what is causing it. 

  * {
        margin:0;
        padding:0;
    }
Scath
  • 3,777
  • 10
  • 29
  • 40
  • Using the `*` CSS selector will apply any rule entered inside its `{ }` to every element on the page. Just in case OP didn't know. – Jake Jun 22 '18 at 15:17
  • How does this answer related to "Can a grid be declared on the element?" – vikramvi Jun 21 '22 at 14:21
1

Sure, if you are seeking a pure CSS solution without any third party API systems such as Bootstrap, you can use CSS Grids.

In your CSS: (though I think it would be better suited for a .container rather than the body class.

body {
  /* This defines the number of horizontal columns and how wide they all are */
  grid-template-columns: 40px 50px auto 50px 40px;
  /* This determines the number of verticle rows and their respective heights */
  grid-template-rows: 25% 100px auto;
}

To define Items (make specific classes to hold certain grid properties:

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start
  grid-row-end: 3
}

Or

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2
  grid-row-end: span 2
}

If you'd like to learn more about this wonderful set of rules, check out this guide (Where I pulled these examples from): https://css-tricks.com/snippets/css/complete-guide-grid/

TylerH
  • 20,799
  • 66
  • 75
  • 101
Jake
  • 1,086
  • 12
  • 38