Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- * {
- margin: 0;
- padding: 0;
- }
- .grid {
- display: grid; /* Mobile Version! */
- grid-template-columns: 1fr 500px 500px 1fr;
- grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
- grid-template-areas:
- "title title"
- "header header"
- "sidebar sidebar"
- "content content"
- "footer footer";
- /* - Mit einem "." anstatt einer grid-area bleibt das grid-feld leer.
- - In diesem Beispiel ist das Grid mobile First, und der mediaQ für Desktop!
- - Es sind auch %, auto und px zB als column und row angabe möglich
- */
- }
- .title {
- grid-area: title;
- }
- .header {
- grid-area: header;
- }
- .sidebar {
- grid-area: sidebar;
- }
- .content {
- grid-area: content;
- /* - justify-self: start;
- - "start" für links, "center" für center, "end" für rechts
- - "align" für für vertikale ausrichtung.
- - Verschachtelte Grids sind auch möglich. */
- }
- .footer {
- grid-area: footer;
- }
- .grid div:nth-child(even) {
- background-color: red;
- }
- .grid div:nth-child(odd) {
- background-color:green;
- }
- @media screen and (min-width: 736px) {
- .grid { /* Desktop Version! */
- display: grid;
- grid-template-columns: 1fr 500px 500px 1fr;
- grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
- grid-template-areas:
- ". title title ."
- ". header header ."
- ". sidebar content ."
- ". footer footer .";
- }
- }
Add Comment
Please, Sign In to add comment