In css grid what does using 1 value for grid-column mean?
I know there are grid-row-start
and grid-column-start
where you can type one value, however, what does it mean when you use one value for grid-column
.
grid-column:3;
grid-column-start:2;
grid-column-end:4;
css css3 css-grid
add a comment |
I know there are grid-row-start
and grid-column-start
where you can type one value, however, what does it mean when you use one value for grid-column
.
grid-column:3;
grid-column-start:2;
grid-column-end:4;
css css3 css-grid
1
@LGSon no it's not a syntax error, it will be considered as3/auto
– Temani Afif
Nov 16 '18 at 22:08
@TemaniAfif Thanks...figured there were some short circuit effect, so deleted my comment
– LGSon
Nov 16 '18 at 22:10
add a comment |
I know there are grid-row-start
and grid-column-start
where you can type one value, however, what does it mean when you use one value for grid-column
.
grid-column:3;
grid-column-start:2;
grid-column-end:4;
css css3 css-grid
I know there are grid-row-start
and grid-column-start
where you can type one value, however, what does it mean when you use one value for grid-column
.
grid-column:3;
grid-column-start:2;
grid-column-end:4;
css css3 css-grid
css css3 css-grid
edited Nov 16 '18 at 23:42
Juan Castillo
3,48732835
3,48732835
asked Nov 16 '18 at 22:01
lanalana
71128
71128
1
@LGSon no it's not a syntax error, it will be considered as3/auto
– Temani Afif
Nov 16 '18 at 22:08
@TemaniAfif Thanks...figured there were some short circuit effect, so deleted my comment
– LGSon
Nov 16 '18 at 22:10
add a comment |
1
@LGSon no it's not a syntax error, it will be considered as3/auto
– Temani Afif
Nov 16 '18 at 22:08
@TemaniAfif Thanks...figured there were some short circuit effect, so deleted my comment
– LGSon
Nov 16 '18 at 22:10
1
1
@LGSon no it's not a syntax error, it will be considered as
3/auto
– Temani Afif
Nov 16 '18 at 22:08
@LGSon no it's not a syntax error, it will be considered as
3/auto
– Temani Afif
Nov 16 '18 at 22:08
@TemaniAfif Thanks...figured there were some short circuit effect, so deleted my comment
– LGSon
Nov 16 '18 at 22:10
@TemaniAfif Thanks...figured there were some short circuit effect, so deleted my comment
– LGSon
Nov 16 '18 at 22:10
add a comment |
1 Answer
1
active
oldest
votes
Here's the official spec and here's the user friendly translation.
As a rule of thumb, searching for "mdn
+ property name" will give you the easy to understand page on MDN, which also contains the link(s) to any current, former or future (proposed) official documentation.
Another very useful rule of thumb, regarding shorthand properties (if using Chrome) is that in development console, on Elements tab, in Styles drawer, the shorthand property will always have a little arrow besides the value. Clicking it will reveal the full "translation".
grid-column: 3
is interpreted as:
grid-column-start: 3;
grid-column-end: auto;
Finally, another rule of thumb is not to confuse W3C (official web consortium docs: http://w3.org) with w3cschools which is a privately owned business trying to monetize the search for web documentation by providing vague and rarely up to date content.
Technically, it's phishing, but a somewhat harmless type of phishing.
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',
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
});
}
});
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%2f53346020%2fin-css-grid-what-does-using-1-value-for-grid-column-mean%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Here's the official spec and here's the user friendly translation.
As a rule of thumb, searching for "mdn
+ property name" will give you the easy to understand page on MDN, which also contains the link(s) to any current, former or future (proposed) official documentation.
Another very useful rule of thumb, regarding shorthand properties (if using Chrome) is that in development console, on Elements tab, in Styles drawer, the shorthand property will always have a little arrow besides the value. Clicking it will reveal the full "translation".
grid-column: 3
is interpreted as:
grid-column-start: 3;
grid-column-end: auto;
Finally, another rule of thumb is not to confuse W3C (official web consortium docs: http://w3.org) with w3cschools which is a privately owned business trying to monetize the search for web documentation by providing vague and rarely up to date content.
Technically, it's phishing, but a somewhat harmless type of phishing.
add a comment |
Here's the official spec and here's the user friendly translation.
As a rule of thumb, searching for "mdn
+ property name" will give you the easy to understand page on MDN, which also contains the link(s) to any current, former or future (proposed) official documentation.
Another very useful rule of thumb, regarding shorthand properties (if using Chrome) is that in development console, on Elements tab, in Styles drawer, the shorthand property will always have a little arrow besides the value. Clicking it will reveal the full "translation".
grid-column: 3
is interpreted as:
grid-column-start: 3;
grid-column-end: auto;
Finally, another rule of thumb is not to confuse W3C (official web consortium docs: http://w3.org) with w3cschools which is a privately owned business trying to monetize the search for web documentation by providing vague and rarely up to date content.
Technically, it's phishing, but a somewhat harmless type of phishing.
add a comment |
Here's the official spec and here's the user friendly translation.
As a rule of thumb, searching for "mdn
+ property name" will give you the easy to understand page on MDN, which also contains the link(s) to any current, former or future (proposed) official documentation.
Another very useful rule of thumb, regarding shorthand properties (if using Chrome) is that in development console, on Elements tab, in Styles drawer, the shorthand property will always have a little arrow besides the value. Clicking it will reveal the full "translation".
grid-column: 3
is interpreted as:
grid-column-start: 3;
grid-column-end: auto;
Finally, another rule of thumb is not to confuse W3C (official web consortium docs: http://w3.org) with w3cschools which is a privately owned business trying to monetize the search for web documentation by providing vague and rarely up to date content.
Technically, it's phishing, but a somewhat harmless type of phishing.
Here's the official spec and here's the user friendly translation.
As a rule of thumb, searching for "mdn
+ property name" will give you the easy to understand page on MDN, which also contains the link(s) to any current, former or future (proposed) official documentation.
Another very useful rule of thumb, regarding shorthand properties (if using Chrome) is that in development console, on Elements tab, in Styles drawer, the shorthand property will always have a little arrow besides the value. Clicking it will reveal the full "translation".
grid-column: 3
is interpreted as:
grid-column-start: 3;
grid-column-end: auto;
Finally, another rule of thumb is not to confuse W3C (official web consortium docs: http://w3.org) with w3cschools which is a privately owned business trying to monetize the search for web documentation by providing vague and rarely up to date content.
Technically, it's phishing, but a somewhat harmless type of phishing.
edited Nov 16 '18 at 23:49
answered Nov 16 '18 at 23:35
Andrei GheorghiuAndrei Gheorghiu
34.8k74774
34.8k74774
add a comment |
add a comment |
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.
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%2f53346020%2fin-css-grid-what-does-using-1-value-for-grid-column-mean%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
1
@LGSon no it's not a syntax error, it will be considered as
3/auto
– Temani Afif
Nov 16 '18 at 22:08
@TemaniAfif Thanks...figured there were some short circuit effect, so deleted my comment
– LGSon
Nov 16 '18 at 22:10