Grid Template Area Issues
1
In CSS grid, my container fills the width of the screen but the grid template area does not: is there a fix to this. I have tried to adjust the size of the container, but that just changes the position of the grid. Could this be an issue of using grid template area because this system works with grid-template rows and grid-template columns?
body
{
text-decoration: none;
padding: 0;
margin: 0;
font-size: 0.7vw;
font-family: 'Roboto', sans-serif;
}
h1
{
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 1200%;
margin: 0px;
bottom: 0px;
}
a
{
text-decoration: none;
color: inherit;
}
a:hover
{
color: #404040;
}
:root
{
--color-one: #cccccc;
--color-two: #8533ff;
--color-three: #f2f2f2;
--text-color: black;
}
/*Navbar*/
.navbar
{
height: 10%;
width: 100%;
background-color: var(--color-one);
font-size: 250%;
color: var(--text-color);
opacity: 0.9;
display: grid;
grid-template-rows: 100%;
grid-template-columns: 2fr 3fr 3fr 3fr;
text-align: center;
position: sticky;
top: 0;
z-index: 10;
}
.navBarItems
{
margin-top: 15px;
}
#navBarHead
{
margin-top: 12.5px;
font-size: 120%;
text-align: left;
margin-left: 20px;
}
.tutorial
{
display: grid;
width: 100%;
height: 55%;
grid-template-areas:
"a a a a"
"b c d e"
"b c d e"
"b c d e"
"b c d e";
justify-content: center;
background-color: var(--color-two);
}
.topHeader
{
font-size: 250%;
color: white;
vertical-align: center;
align-self: center;
}
.video
{
background-color: var(--color-three);
font-size: 250%;
}<html>
<head>
<title>Code !t</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto|Bree+Serif" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="htmlcss.css">
</head>
<body>
<div class="navbar">
<div id = "navBarHead"><a href src="index.html">Code !t</a></div>
<div class = "navBarItems">HTML</div>
<div class = "navBarItems">CSS</div>
<div class = "navBarItems">JAVA SCRIPT</div>
</div>
<div class = "tutorial">
<div class = "topHeader" style="grid-area: a">HTML Basics</div>
<div class = "Video" style="grid-area: b"></div>
<!--<div class = "Video"></div>
<div class = "Video"></div>
<div class = "Video"></div>-->
</div>
</body>
</html>html css css3 css-grid
edited Nov 11 at 19:11
Temani Afif
64.7k93675
asked Nov 11 at 18:32
Bykaugan
61
add a comment |
1
In CSS grid, my container fills the width of the screen but the grid template area does not: is there a fix to this. I have tried to adjust the size of the container, but that just changes the position of the grid. Could this be an issue of using grid template area because this system works with grid-template rows and grid-template columns?
body
{
text-decoration: none;
padding: 0;
margin: 0;
font-size: 0.7vw;
font-family: 'Roboto', sans-serif;
}
h1
{
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 1200%;
margin: 0px;
bottom: 0px;
}
a
{
text-decoration: none;
color: inherit;
}
a:hover
{
color: #404040;
}
:root
{
--color-one: #cccccc;
--color-two: #8533ff;
--color-three: #f2f2f2;
--text-color: black;
}
/*Navbar*/
.navbar
{
height: 10%;
width: 100%;
background-color: var(--color-one);
font-size: 250%;
color: var(--text-color);
opacity: 0.9;
display: grid;
grid-template-rows: 100%;
grid-template-columns: 2fr 3fr 3fr 3fr;
text-align: center;
position: sticky;
top: 0;
z-index: 10;
}
.navBarItems
{
margin-top: 15px;
}
#navBarHead
{
margin-top: 12.5px;
font-size: 120%;
text-align: left;
margin-left: 20px;
}
.tutorial
{
display: grid;
width: 100%;
height: 55%;
grid-template-areas:
"a a a a"
"b c d e"
"b c d e"
"b c d e"
"b c d e";
justify-content: center;
background-color: var(--color-two);
}
.topHeader
{
font-size: 250%;
color: white;
vertical-align: center;
align-self: center;
}
.video
{
background-color: var(--color-three);
font-size: 250%;
}<html>
<head>
<title>Code !t</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto|Bree+Serif" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="htmlcss.css">
</head>
<body>
<div class="navbar">
<div id = "navBarHead"><a href src="index.html">Code !t</a></div>
<div class = "navBarItems">HTML</div>
<div class = "navBarItems">CSS</div>
<div class = "navBarItems">JAVA SCRIPT</div>
</div>
<div class = "tutorial">
<div class = "topHeader" style="grid-area: a">HTML Basics</div>
<div class = "Video" style="grid-area: b"></div>
<!--<div class = "Video"></div>
<div class = "Video"></div>
<div class = "Video"></div>-->
</div>
</body>
</html>html css css3 css-grid
edited Nov 11 at 19:11
Temani Afif
64.7k93675
asked Nov 11 at 18:32
Bykaugan
61
removejustify-content: center;?
– Temani Afif
Nov 11 at 19:11
Thanks so much: that fixed the issue
– Bykaugan
Nov 11 at 19:26
add a comment |
1
1
1
In CSS grid, my container fills the width of the screen but the grid template area does not: is there a fix to this. I have tried to adjust the size of the container, but that just changes the position of the grid. Could this be an issue of using grid template area because this system works with grid-template rows and grid-template columns?
body
{
text-decoration: none;
padding: 0;
margin: 0;
font-size: 0.7vw;
font-family: 'Roboto', sans-serif;
}
h1
{
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 1200%;
margin: 0px;
bottom: 0px;
}
a
{
text-decoration: none;
color: inherit;
}
a:hover
{
color: #404040;
}
:root
{
--color-one: #cccccc;
--color-two: #8533ff;
--color-three: #f2f2f2;
--text-color: black;
}
/*Navbar*/
.navbar
{
height: 10%;
width: 100%;
background-color: var(--color-one);
font-size: 250%;
color: var(--text-color);
opacity: 0.9;
display: grid;
grid-template-rows: 100%;
grid-template-columns: 2fr 3fr 3fr 3fr;
text-align: center;
position: sticky;
top: 0;
z-index: 10;
}
.navBarItems
{
margin-top: 15px;
}
#navBarHead
{
margin-top: 12.5px;
font-size: 120%;
text-align: left;
margin-left: 20px;
}
.tutorial
{
display: grid;
width: 100%;
height: 55%;
grid-template-areas:
"a a a a"
"b c d e"
"b c d e"
"b c d e"
"b c d e";
justify-content: center;
background-color: var(--color-two);
}
.topHeader
{
font-size: 250%;
color: white;
vertical-align: center;
align-self: center;
}
.video
{
background-color: var(--color-three);
font-size: 250%;
}<html>
<head>
<title>Code !t</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto|Bree+Serif" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="htmlcss.css">
</head>
<body>
<div class="navbar">
<div id = "navBarHead"><a href src="index.html">Code !t</a></div>
<div class = "navBarItems">HTML</div>
<div class = "navBarItems">CSS</div>
<div class = "navBarItems">JAVA SCRIPT</div>
</div>
<div class = "tutorial">
<div class = "topHeader" style="grid-area: a">HTML Basics</div>
<div class = "Video" style="grid-area: b"></div>
<!--<div class = "Video"></div>
<div class = "Video"></div>
<div class = "Video"></div>-->
</div>
</body>
</html>html css css3 css-grid
edited Nov 11 at 19:11
Temani Afif
64.7k93675
asked Nov 11 at 18:32
Bykaugan
61
In CSS grid, my container fills the width of the screen but the grid template area does not: is there a fix to this. I have tried to adjust the size of the container, but that just changes the position of the grid. Could this be an issue of using grid template area because this system works with grid-template rows and grid-template columns?
body
{
text-decoration: none;
padding: 0;
margin: 0;
font-size: 0.7vw;
font-family: 'Roboto', sans-serif;
}
h1
{
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 1200%;
margin: 0px;
bottom: 0px;
}
a
{
text-decoration: none;
color: inherit;
}
a:hover
{
color: #404040;
}
:root
{
--color-one: #cccccc;
--color-two: #8533ff;
--color-three: #f2f2f2;
--text-color: black;
}
/*Navbar*/
.navbar
{
height: 10%;
width: 100%;
background-color: var(--color-one);
font-size: 250%;
color: var(--text-color);
opacity: 0.9;
display: grid;
grid-template-rows: 100%;
grid-template-columns: 2fr 3fr 3fr 3fr;
text-align: center;
position: sticky;
top: 0;
z-index: 10;
}
.navBarItems
{
margin-top: 15px;
}
#navBarHead
{
margin-top: 12.5px;
font-size: 120%;
text-align: left;
margin-left: 20px;
}
.tutorial
{
display: grid;
width: 100%;
height: 55%;
grid-template-areas:
"a a a a"
"b c d e"
"b c d e"
"b c d e"
"b c d e";
justify-content: center;
background-color: var(--color-two);
}
.topHeader
{
font-size: 250%;
color: white;
vertical-align: center;
align-self: center;
}
.video
{
background-color: var(--color-three);
font-size: 250%;
}<html>
<head>
<title>Code !t</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto|Bree+Serif" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="htmlcss.css">
</head>
<body>
<div class="navbar">
<div id = "navBarHead"><a href src="index.html">Code !t</a></div>
<div class = "navBarItems">HTML</div>
<div class = "navBarItems">CSS</div>
<div class = "navBarItems">JAVA SCRIPT</div>
</div>
<div class = "tutorial">
<div class = "topHeader" style="grid-area: a">HTML Basics</div>
<div class = "Video" style="grid-area: b"></div>
<!--<div class = "Video"></div>
<div class = "Video"></div>
<div class = "Video"></div>-->
</div>
</body>
</html>body
{
text-decoration: none;
padding: 0;
margin: 0;
font-size: 0.7vw;
font-family: 'Roboto', sans-serif;
}
h1
{
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 1200%;
margin: 0px;
bottom: 0px;
}
a
{
text-decoration: none;
color: inherit;
}
a:hover
{
color: #404040;
}
:root
{
--color-one: #cccccc;
--color-two: #8533ff;
--color-three: #f2f2f2;
--text-color: black;
}
/*Navbar*/
.navbar
{
height: 10%;
width: 100%;
background-color: var(--color-one);
font-size: 250%;
color: var(--text-color);
opacity: 0.9;
display: grid;
grid-template-rows: 100%;
grid-template-columns: 2fr 3fr 3fr 3fr;
text-align: center;
position: sticky;
top: 0;
z-index: 10;
}
.navBarItems
{
margin-top: 15px;
}
#navBarHead
{
margin-top: 12.5px;
font-size: 120%;
text-align: left;
margin-left: 20px;
}
.tutorial
{
display: grid;
width: 100%;
height: 55%;
grid-template-areas:
"a a a a"
"b c d e"
"b c d e"
"b c d e"
"b c d e";
justify-content: center;
background-color: var(--color-two);
}
.topHeader
{
font-size: 250%;
color: white;
vertical-align: center;
align-self: center;
}
.video
{
background-color: var(--color-three);
font-size: 250%;
}<html>
<head>
<title>Code !t</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto|Bree+Serif" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="htmlcss.css">
</head>
<body>
<div class="navbar">
<div id = "navBarHead"><a href src="index.html">Code !t</a></div>
<div class = "navBarItems">HTML</div>
<div class = "navBarItems">CSS</div>
<div class = "navBarItems">JAVA SCRIPT</div>
</div>
<div class = "tutorial">
<div class = "topHeader" style="grid-area: a">HTML Basics</div>
<div class = "Video" style="grid-area: b"></div>
<!--<div class = "Video"></div>
<div class = "Video"></div>
<div class = "Video"></div>-->
</div>
</body>
</html>body
{
text-decoration: none;
padding: 0;
margin: 0;
font-size: 0.7vw;
font-family: 'Roboto', sans-serif;
}
h1
{
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 1200%;
margin: 0px;
bottom: 0px;
}
a
{
text-decoration: none;
color: inherit;
}
a:hover
{
color: #404040;
}
:root
{
--color-one: #cccccc;
--color-two: #8533ff;
--color-three: #f2f2f2;
--text-color: black;
}
/*Navbar*/
.navbar
{
height: 10%;
width: 100%;
background-color: var(--color-one);
font-size: 250%;
color: var(--text-color);
opacity: 0.9;
display: grid;
grid-template-rows: 100%;
grid-template-columns: 2fr 3fr 3fr 3fr;
text-align: center;
position: sticky;
top: 0;
z-index: 10;
}
.navBarItems
{
margin-top: 15px;
}
#navBarHead
{
margin-top: 12.5px;
font-size: 120%;
text-align: left;
margin-left: 20px;
}
.tutorial
{
display: grid;
width: 100%;
height: 55%;
grid-template-areas:
"a a a a"
"b c d e"
"b c d e"
"b c d e"
"b c d e";
justify-content: center;
background-color: var(--color-two);
}
.topHeader
{
font-size: 250%;
color: white;
vertical-align: center;
align-self: center;
}
.video
{
background-color: var(--color-three);
font-size: 250%;
}<html>
<head>
<title>Code !t</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto|Bree+Serif" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="htmlcss.css">
</head>
<body>
<div class="navbar">
<div id = "navBarHead"><a href src="index.html">Code !t</a></div>
<div class = "navBarItems">HTML</div>
<div class = "navBarItems">CSS</div>
<div class = "navBarItems">JAVA SCRIPT</div>
</div>
<div class = "tutorial">
<div class = "topHeader" style="grid-area: a">HTML Basics</div>
<div class = "Video" style="grid-area: b"></div>
<!--<div class = "Video"></div>
<div class = "Video"></div>
<div class = "Video"></div>-->
</div>
</body>
</html>html css css3 css-grid
html css css3 css-grid
edited Nov 11 at 19:11
Temani Afif
64.7k93675
asked Nov 11 at 18:32
Bykaugan
61
edited Nov 11 at 19:11
Temani Afif
64.7k93675
asked Nov 11 at 18:32
Bykaugan
61
edited Nov 11 at 19:11
Temani Afif
64.7k93675
edited Nov 11 at 19:11
Temani Afif
64.7k93675
edited Nov 11 at 19:11
Temani Afif
64.7k93675
64.7k93675
asked Nov 11 at 18:32
Bykaugan
61
asked Nov 11 at 18:32
Bykaugan
61
asked Nov 11 at 18:32
Bykaugan
61
61
removejustify-content: center;?
– Temani Afif
Nov 11 at 19:11
Thanks so much: that fixed the issue
– Bykaugan
Nov 11 at 19:26
add a comment |
removejustify-content: center;?
– Temani Afif
Nov 11 at 19:11
Thanks so much: that fixed the issue
– Bykaugan
Nov 11 at 19:26
remove
justify-content: center;?– Temani Afif
Nov 11 at 19:11
remove
justify-content: center;?– Temani Afif
Nov 11 at 19:11
Thanks so much: that fixed the issue
– Bykaugan
Nov 11 at 19:26
Thanks so much: that fixed the issue
– Bykaugan
Nov 11 at 19:26
add a comment |
active
oldest
votes
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',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53251868%2fgrid-template-area-issues%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53251868%2fgrid-template-area-issues%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
remove
justify-content: center;?– Temani Afif
Nov 11 at 19:11
Thanks so much: that fixed the issue
– Bykaugan
Nov 11 at 19:26