Why don't background colors work in inline-grids

up vote
6
down vote

favorite

I created two divs; one with a display:inline-grid property and another with display:grid property. I want to apply a background color to the child elements of both divs but the div with the display:inline-grid property is not coloring its elements.

HTML and CSS code

#inline 
 display: inline-grid;


#block 
 display: grid;


div div 
 height: 50px;


div div:nth-child(1n) 
 background-color: green;


div div:nth-child(2n) 
 background-color: rebeccapurple;


div div:nth-child(3n) 
 background-color: aquamarine;

<body>
 <div id="inline">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div id="block">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
</body>

The output is:
enter image description here

How can I color the divs inside the inline-grid div?

edited Aug 11 at 7:51

ProgrammerPer

203210

asked Aug 11 at 7:38

user9218974

9911

Your output image isn't actually displaying, might want to take a look at that
â€“Â JBDouble05
Aug 30 at 0:02

add a commentÂ |Â

up vote
6
down vote

favorite

HTML and CSS code

#inline 
 display: inline-grid;


#block 
 display: grid;


div div 
 height: 50px;


div div:nth-child(1n) 
 background-color: green;


div div:nth-child(2n) 
 background-color: rebeccapurple;


div div:nth-child(3n) 
 background-color: aquamarine;

<body>
 <div id="inline">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div id="block">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
</body>

The output is:
enter image description here

How can I color the divs inside the inline-grid div?

edited Aug 11 at 7:51

ProgrammerPer

203210

asked Aug 11 at 7:38

user9218974

9911

Your output image isn't actually displaying, might want to take a look at that
â€“Â JBDouble05
Aug 30 at 0:02

add a commentÂ |Â

up vote
6
down vote

favorite

HTML and CSS code

#inline 
 display: inline-grid;


#block 
 display: grid;


div div 
 height: 50px;


div div:nth-child(1n) 
 background-color: green;


div div:nth-child(2n) 
 background-color: rebeccapurple;


div div:nth-child(3n) 
 background-color: aquamarine;

<body>
 <div id="inline">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div id="block">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
</body>

The output is:
enter image description here

How can I color the divs inside the inline-grid div?

edited Aug 11 at 7:51

ProgrammerPer

203210

asked Aug 11 at 7:38

user9218974

9911

HTML and CSS code

#inline 
 display: inline-grid;


#block 
 display: grid;


div div 
 height: 50px;


div div:nth-child(1n) 
 background-color: green;


div div:nth-child(2n) 
 background-color: rebeccapurple;


div div:nth-child(3n) 
 background-color: aquamarine;

<body>
 <div id="inline">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div id="block">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
</body>

The output is:
enter image description here

How can I color the divs inside the inline-grid div?

#inline 
 display: inline-grid;


#block 
 display: grid;


div div 
 height: 50px;


div div:nth-child(1n) 
 background-color: green;


div div:nth-child(2n) 
 background-color: rebeccapurple;


div div:nth-child(3n) 
 background-color: aquamarine;

<body>
 <div id="inline">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div id="block">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
</body>

#inline 
 display: inline-grid;


#block 
 display: grid;


div div 
 height: 50px;


div div:nth-child(1n) 
 background-color: green;


div div:nth-child(2n) 
 background-color: rebeccapurple;


div div:nth-child(3n) 
 background-color: aquamarine;

<body>
 <div id="inline">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div id="block">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
</body>

html css css3 css-grid

edited Aug 11 at 7:51

ProgrammerPer

203210

asked Aug 11 at 7:38

user9218974

9911

edited Aug 11 at 7:51

ProgrammerPer

203210

asked Aug 11 at 7:38

user9218974

9911

edited Aug 11 at 7:51

ProgrammerPer

203210

edited Aug 11 at 7:51

ProgrammerPer

203210

edited Aug 11 at 7:51

ProgrammerPer

203210

asked Aug 11 at 7:38

user9218974

9911

asked Aug 11 at 7:38

user9218974

9911

asked Aug 11 at 7:38

user9218974

9911

Your output image isn't actually displaying, might want to take a look at that
â€“Â JBDouble05
Aug 30 at 0:02

add a commentÂ |Â

Your output image isn't actually displaying, might want to take a look at that
â€“Â JBDouble05
Aug 30 at 0:02

Your output image isn't actually displaying, might want to take a look at that
â€“Â JBDouble05
Aug 30 at 0:02

add a commentÂ |Â

6 Answers
6

active

oldest

votes

up vote
4
down vote

accepted

This happens because display: inline-grid; is a inline elements

Basically, an inline element does not cause a line break (start on a
new line) and does not take up the full width of a page, only the
space bounded by its opening and closing tag. It is usually used
within other HTML elements.

if you want you can colour it by using some additional styles for sample width:100%; in your case:

#inline 
 display: inline-grid;
 width:100%;

#block 
 display: grid;


div div 
 height: 50px;


div div:nth-child(1n) 
 background-color: green;


div div:nth-child(2n) 
 background-color: rebeccapurple;


div div:nth-child(3n) 
 background-color: aquamarine;

<body>
 <div id="inline">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div id="block">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
</body>

answered Aug 11 at 7:48

weBBer

3,87641545

add a commentÂ |Â

up vote
8
down vote

Being an inline element, it's width is defined by its content. But there is no content here.

Just add width:

#inline 
 display: inline-grid;
 width: 150px;


#block 
 display: grid;


div div 
 height: 50px;


div div:nth-child(1n) 
 background-color: green;


div div:nth-child(2n) 
 background-color: rebeccapurple;


div div:nth-child(3n) 
 background-color: aquamarine;

<body>
 <div id="inline">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div id="block">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
</body>

answered Aug 11 at 7:46

vals

42.9k652108

add a commentÂ |Â

up vote
0
down vote

Just add a "width" attribute to your division:

#inline 
 display: inline-grid;
 width: 100%;

answered Aug 11 at 7:50

Sami Al Morshedi

608

add a commentÂ |Â

up vote
0
down vote

I have just added width property to the #inline css and this is now working.

#inline 
 display: inline-grid;
 width: 100%;

answered Aug 11 at 7:52

BharathwajRK

293

add a commentÂ |Â

up vote
0
down vote

add width to inline elements because unlike block elements their width depends upon content inside them

answered Aug 11 at 7:59

MaBb Khawaja

add a commentÂ |Â

up vote
-1
down vote

You must know why you should use any display type and when to use it, this is the best way to have the result you need

CSS Grid Layout Module

.grid-container 
 display: grid;
 grid-gap: 10px;
 background-color: #2196F3;
 padding: 10px;
 text-align: center;


.grid-item 
 background-color: rgba(255, 255, 255, 0.8);

<div class="grid-container" style="grid-template-areas:
 'header header header header header header'
 'menu main main main right right'
 'menu footer footer footer footer footer';">
 <div class="grid-item" style="grid-area: header">
 <h3>Header</h3>
 </div>
 <div class="grid-item" style="grid-area: menu">
 <h3>Menu</h3>
 </div>
 <div class="grid-item" style="grid-area: main">
 <h3>Main</h3>
 </div>
 <div class="grid-item" style="grid-area: right">
 <h3>Right</h3>
 </div>
 <div class="grid-item" style="grid-area: footer">
 <h3>Footer</h3>
 </div>
</div>

Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with
rows and columns, making it easier to design web pages without having
to use floats and positioning.

More info ->

answered Aug 11 at 7:59

M0ns1f

2,4252820

add a commentÂ |Â

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: false,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f51797561%2fwhy-dont-background-colors-work-in-inline-grids%23new-answer', 'question_page');

);

Post as a guest

Name

6 Answers
6

active

oldest

votes

6 Answers
6

active

oldest

votes

up vote
4
down vote

accepted

This happens because display: inline-grid; is a inline elements

Basically, an inline element does not cause a line break (start on a
new line) and does not take up the full width of a page, only the
space bounded by its opening and closing tag. It is usually used
within other HTML elements.

if you want you can colour it by using some additional styles for sample width:100%; in your case:

#inline 
 display: inline-grid;
 width:100%;

#block 
 display: grid;


div div 
 height: 50px;


div div:nth-child(1n) 
 background-color: green;


div div:nth-child(2n) 
 background-color: rebeccapurple;


div div:nth-child(3n) 
 background-color: aquamarine;

<body>
 <div id="inline">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div id="block">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
</body>

answered Aug 11 at 7:48

weBBer

3,87641545

add a commentÂ |Â

up vote
4
down vote

accepted

This happens because display: inline-grid; is a inline elements

Basically, an inline element does not cause a line break (start on a
new line) and does not take up the full width of a page, only the
space bounded by its opening and closing tag. It is usually used
within other HTML elements.

if you want you can colour it by using some additional styles for sample width:100%; in your case:

#inline 
 display: inline-grid;
 width:100%;

#block 
 display: grid;


div div 
 height: 50px;


div div:nth-child(1n) 
 background-color: green;


div div:nth-child(2n) 
 background-color: rebeccapurple;


div div:nth-child(3n) 
 background-color: aquamarine;

<body>
 <div id="inline">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div id="block">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
</body>

answered Aug 11 at 7:48

weBBer

3,87641545

add a commentÂ |Â

up vote
4
down vote

accepted

This happens because display: inline-grid; is a inline elements

Basically, an inline element does not cause a line break (start on a
new line) and does not take up the full width of a page, only the
space bounded by its opening and closing tag. It is usually used
within other HTML elements.

if you want you can colour it by using some additional styles for sample width:100%; in your case:

#inline 
 display: inline-grid;
 width:100%;

#block 
 display: grid;


div div 
 height: 50px;


div div:nth-child(1n) 
 background-color: green;


div div:nth-child(2n) 
 background-color: rebeccapurple;


div div:nth-child(3n) 
 background-color: aquamarine;

<body>
 <div id="inline">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div id="block">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
</body>

answered Aug 11 at 7:48

weBBer

3,87641545

This happens because display: inline-grid; is a inline elements

Basically, an inline element does not cause a line break (start on a
new line) and does not take up the full width of a page, only the
space bounded by its opening and closing tag. It is usually used
within other HTML elements.

if you want you can colour it by using some additional styles for sample width:100%; in your case:

#inline 
 display: inline-grid;
 width:100%;

#block 
 display: grid;


div div 
 height: 50px;


div div:nth-child(1n) 
 background-color: green;


div div:nth-child(2n) 
 background-color: rebeccapurple;


div div:nth-child(3n) 
 background-color: aquamarine;

<body>
 <div id="inline">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div id="block">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
</body>

#inline 
 display: inline-grid;
 width:100%;

#block 
 display: grid;


div div 
 height: 50px;


div div:nth-child(1n) 
 background-color: green;


div div:nth-child(2n) 
 background-color: rebeccapurple;


div div:nth-child(3n) 
 background-color: aquamarine;

<body>
 <div id="inline">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div id="block">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
</body>

#inline 
 display: inline-grid;
 width:100%;

#block 
 display: grid;


div div 
 height: 50px;


div div:nth-child(1n) 
 background-color: green;


div div:nth-child(2n) 
 background-color: rebeccapurple;


div div:nth-child(3n) 
 background-color: aquamarine;

<body>
 <div id="inline">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div id="block">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
</body>

answered Aug 11 at 7:48

weBBer

3,87641545

answered Aug 11 at 7:48

weBBer

3,87641545

answered Aug 11 at 7:48

weBBer

3,87641545

answered Aug 11 at 7:48

weBBer

3,87641545

add a commentÂ |Â

up vote
8
down vote

Being an inline element, it's width is defined by its content. But there is no content here.

Just add width:

#inline 
 display: inline-grid;
 width: 150px;


#block 
 display: grid;


div div 
 height: 50px;


div div:nth-child(1n) 
 background-color: green;


div div:nth-child(2n) 
 background-color: rebeccapurple;


div div:nth-child(3n) 
 background-color: aquamarine;

<body>
 <div id="inline">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div id="block">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
</body>

answered Aug 11 at 7:46

vals

42.9k652108

add a commentÂ |Â

up vote
8
down vote

Being an inline element, it's width is defined by its content. But there is no content here.

Just add width:

#inline 
 display: inline-grid;
 width: 150px;


#block 
 display: grid;


div div 
 height: 50px;


div div:nth-child(1n) 
 background-color: green;


div div:nth-child(2n) 
 background-color: rebeccapurple;


div div:nth-child(3n) 
 background-color: aquamarine;

<body>
 <div id="inline">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div id="block">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
</body>

answered Aug 11 at 7:46

vals

42.9k652108

add a commentÂ |Â

up vote
8
down vote

Being an inline element, it's width is defined by its content. But there is no content here.

Just add width:

#inline 
 display: inline-grid;
 width: 150px;


#block 
 display: grid;


div div 
 height: 50px;


div div:nth-child(1n) 
 background-color: green;


div div:nth-child(2n) 
 background-color: rebeccapurple;


div div:nth-child(3n) 
 background-color: aquamarine;

<body>
 <div id="inline">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div id="block">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
</body>

answered Aug 11 at 7:46

vals

42.9k652108

Being an inline element, it's width is defined by its content. But there is no content here.

Just add width:

#inline 
 display: inline-grid;
 width: 150px;


#block 
 display: grid;


div div 
 height: 50px;


div div:nth-child(1n) 
 background-color: green;


div div:nth-child(2n) 
 background-color: rebeccapurple;


div div:nth-child(3n) 
 background-color: aquamarine;

<body>
 <div id="inline">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div id="block">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
</body>

#inline 
 display: inline-grid;
 width: 150px;


#block 
 display: grid;


div div 
 height: 50px;


div div:nth-child(1n) 
 background-color: green;


div div:nth-child(2n) 
 background-color: rebeccapurple;


div div:nth-child(3n) 
 background-color: aquamarine;

<body>
 <div id="inline">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div id="block">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
</body>

#inline 
 display: inline-grid;
 width: 150px;


#block 
 display: grid;


div div 
 height: 50px;


div div:nth-child(1n) 
 background-color: green;


div div:nth-child(2n) 
 background-color: rebeccapurple;


div div:nth-child(3n) 
 background-color: aquamarine;

<body>
 <div id="inline">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div id="block">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
</body>

answered Aug 11 at 7:46

vals

42.9k652108

answered Aug 11 at 7:46

vals

42.9k652108

answered Aug 11 at 7:46

vals

42.9k652108

answered Aug 11 at 7:46

vals

42.9k652108

add a commentÂ |Â

up vote
0
down vote

Just add a "width" attribute to your division:

#inline 
 display: inline-grid;
 width: 100%;

answered Aug 11 at 7:50

Sami Al Morshedi

608

add a commentÂ |Â

up vote
0
down vote

Just add a "width" attribute to your division:

#inline 
 display: inline-grid;
 width: 100%;

answered Aug 11 at 7:50

Sami Al Morshedi

608

add a commentÂ |Â

up vote
0
down vote

Just add a "width" attribute to your division:

#inline 
 display: inline-grid;
 width: 100%;

answered Aug 11 at 7:50

Sami Al Morshedi

608

Just add a "width" attribute to your division:

#inline 
 display: inline-grid;
 width: 100%;

answered Aug 11 at 7:50

Sami Al Morshedi

608

answered Aug 11 at 7:50

Sami Al Morshedi

608

answered Aug 11 at 7:50

Sami Al Morshedi

608

answered Aug 11 at 7:50

Sami Al Morshedi

608

add a commentÂ |Â

up vote
0
down vote

I have just added width property to the #inline css and this is now working.

#inline 
 display: inline-grid;
 width: 100%;

answered Aug 11 at 7:52

BharathwajRK

293

add a commentÂ |Â

up vote
0
down vote

I have just added width property to the #inline css and this is now working.

#inline 
 display: inline-grid;
 width: 100%;

answered Aug 11 at 7:52

BharathwajRK

293

add a commentÂ |Â

up vote
0
down vote

I have just added width property to the #inline css and this is now working.

#inline 
 display: inline-grid;
 width: 100%;

answered Aug 11 at 7:52

BharathwajRK

293

I have just added width property to the #inline css and this is now working.

#inline 
 display: inline-grid;
 width: 100%;

answered Aug 11 at 7:52

BharathwajRK

293

answered Aug 11 at 7:52

BharathwajRK

293

answered Aug 11 at 7:52

BharathwajRK

293

answered Aug 11 at 7:52

BharathwajRK

293

add a commentÂ |Â

up vote
0
down vote

add width to inline elements because unlike block elements their width depends upon content inside them

answered Aug 11 at 7:59

MaBb Khawaja

add a commentÂ |Â

up vote
0
down vote

add width to inline elements because unlike block elements their width depends upon content inside them

answered Aug 11 at 7:59

MaBb Khawaja

add a commentÂ |Â

up vote
0
down vote

add width to inline elements because unlike block elements their width depends upon content inside them

answered Aug 11 at 7:59

MaBb Khawaja

add width to inline elements because unlike block elements their width depends upon content inside them

answered Aug 11 at 7:59

MaBb Khawaja

answered Aug 11 at 7:59

MaBb Khawaja

answered Aug 11 at 7:59

MaBb Khawaja

answered Aug 11 at 7:59

MaBb Khawaja

add a commentÂ |Â

up vote
-1
down vote

You must know why you should use any display type and when to use it, this is the best way to have the result you need

CSS Grid Layout Module

.grid-container 
 display: grid;
 grid-gap: 10px;
 background-color: #2196F3;
 padding: 10px;
 text-align: center;


.grid-item 
 background-color: rgba(255, 255, 255, 0.8);

<div class="grid-container" style="grid-template-areas:
 'header header header header header header'
 'menu main main main right right'
 'menu footer footer footer footer footer';">
 <div class="grid-item" style="grid-area: header">
 <h3>Header</h3>
 </div>
 <div class="grid-item" style="grid-area: menu">
 <h3>Menu</h3>
 </div>
 <div class="grid-item" style="grid-area: main">
 <h3>Main</h3>
 </div>
 <div class="grid-item" style="grid-area: right">
 <h3>Right</h3>
 </div>
 <div class="grid-item" style="grid-area: footer">
 <h3>Footer</h3>
 </div>
</div>

Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with
rows and columns, making it easier to design web pages without having
to use floats and positioning.

More info ->

answered Aug 11 at 7:59

M0ns1f

2,4252820

add a commentÂ |Â

up vote
-1
down vote

You must know why you should use any display type and when to use it, this is the best way to have the result you need

CSS Grid Layout Module

.grid-container 
 display: grid;
 grid-gap: 10px;
 background-color: #2196F3;
 padding: 10px;
 text-align: center;


.grid-item 
 background-color: rgba(255, 255, 255, 0.8);

<div class="grid-container" style="grid-template-areas:
 'header header header header header header'
 'menu main main main right right'
 'menu footer footer footer footer footer';">
 <div class="grid-item" style="grid-area: header">
 <h3>Header</h3>
 </div>
 <div class="grid-item" style="grid-area: menu">
 <h3>Menu</h3>
 </div>
 <div class="grid-item" style="grid-area: main">
 <h3>Main</h3>
 </div>
 <div class="grid-item" style="grid-area: right">
 <h3>Right</h3>
 </div>
 <div class="grid-item" style="grid-area: footer">
 <h3>Footer</h3>
 </div>
</div>

Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with
rows and columns, making it easier to design web pages without having
to use floats and positioning.

More info ->

answered Aug 11 at 7:59

M0ns1f

2,4252820

add a commentÂ |Â

up vote
-1
down vote

You must know why you should use any display type and when to use it, this is the best way to have the result you need

CSS Grid Layout Module

.grid-container 
 display: grid;
 grid-gap: 10px;
 background-color: #2196F3;
 padding: 10px;
 text-align: center;


.grid-item 
 background-color: rgba(255, 255, 255, 0.8);

<div class="grid-container" style="grid-template-areas:
 'header header header header header header'
 'menu main main main right right'
 'menu footer footer footer footer footer';">
 <div class="grid-item" style="grid-area: header">
 <h3>Header</h3>
 </div>
 <div class="grid-item" style="grid-area: menu">
 <h3>Menu</h3>
 </div>
 <div class="grid-item" style="grid-area: main">
 <h3>Main</h3>
 </div>
 <div class="grid-item" style="grid-area: right">
 <h3>Right</h3>
 </div>
 <div class="grid-item" style="grid-area: footer">
 <h3>Footer</h3>
 </div>
</div>

Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with
rows and columns, making it easier to design web pages without having
to use floats and positioning.

More info ->

answered Aug 11 at 7:59

M0ns1f

2,4252820

You must know why you should use any display type and when to use it, this is the best way to have the result you need

CSS Grid Layout Module

.grid-container 
 display: grid;
 grid-gap: 10px;
 background-color: #2196F3;
 padding: 10px;
 text-align: center;


.grid-item 
 background-color: rgba(255, 255, 255, 0.8);

<div class="grid-container" style="grid-template-areas:
 'header header header header header header'
 'menu main main main right right'
 'menu footer footer footer footer footer';">
 <div class="grid-item" style="grid-area: header">
 <h3>Header</h3>
 </div>
 <div class="grid-item" style="grid-area: menu">
 <h3>Menu</h3>
 </div>
 <div class="grid-item" style="grid-area: main">
 <h3>Main</h3>
 </div>
 <div class="grid-item" style="grid-area: right">
 <h3>Right</h3>
 </div>
 <div class="grid-item" style="grid-area: footer">
 <h3>Footer</h3>
 </div>
</div>

Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with
rows and columns, making it easier to design web pages without having
to use floats and positioning.

More info ->

.grid-container 
 display: grid;
 grid-gap: 10px;
 background-color: #2196F3;
 padding: 10px;
 text-align: center;


.grid-item 
 background-color: rgba(255, 255, 255, 0.8);

<div class="grid-container" style="grid-template-areas:
 'header header header header header header'
 'menu main main main right right'
 'menu footer footer footer footer footer';">
 <div class="grid-item" style="grid-area: header">
 <h3>Header</h3>
 </div>
 <div class="grid-item" style="grid-area: menu">
 <h3>Menu</h3>
 </div>
 <div class="grid-item" style="grid-area: main">
 <h3>Main</h3>
 </div>
 <div class="grid-item" style="grid-area: right">
 <h3>Right</h3>
 </div>
 <div class="grid-item" style="grid-area: footer">
 <h3>Footer</h3>
 </div>
</div>

.grid-container 
 display: grid;
 grid-gap: 10px;
 background-color: #2196F3;
 padding: 10px;
 text-align: center;


.grid-item 
 background-color: rgba(255, 255, 255, 0.8);

<div class="grid-container" style="grid-template-areas:
 'header header header header header header'
 'menu main main main right right'
 'menu footer footer footer footer footer';">
 <div class="grid-item" style="grid-area: header">
 <h3>Header</h3>
 </div>
 <div class="grid-item" style="grid-area: menu">
 <h3>Menu</h3>
 </div>
 <div class="grid-item" style="grid-area: main">
 <h3>Main</h3>
 </div>
 <div class="grid-item" style="grid-area: right">
 <h3>Right</h3>
 </div>
 <div class="grid-item" style="grid-area: footer">
 <h3>Footer</h3>
 </div>
</div>

answered Aug 11 at 7:59

M0ns1f

2,4252820

answered Aug 11 at 7:59

M0ns1f

2,4252820

answered Aug 11 at 7:59

M0ns1f

2,4252820

answered Aug 11 at 7:59

M0ns1f

2,4252820

add a commentÂ |Â

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

搜尋此網誌

mjhjmtu