Set CSS Grid on element?

问题

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.

回答1:

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;
    }

回答2:

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
}

.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/

来源：https://stackoverflow.com/questions/50990928/set-css-grid-on-body-element

标签

html

css

css-grid

Set CSS Grid on <body> element?

问题

回答1:

回答2: