How to span an image across multiple grid items using grid-template-areas?

I am currently setting up grid for my website that is supposed to hold content of different sizes in specific grid cells, but I cannot figure out how to make eg images span multiple grid cells without messing up the page.

I had to redesign the way I set up my site due to my previous method of manually placing items in html not being responsive. I tried to add classes akin to class="threebythree" and then give that class a min-width and min-height in css. This somehow resulted in additional columns being added to the grid even when the classes were not in use.

<div class="gridcontainer">

    <div class="grid grid1 header">

        <img src="images/headergraphic.svg" alt="Header graphic" class="title">

    </div>

    <div class="grid grid2"></div>

    <div class="grid grid3"></div>

    <div class="grid grid4"></div>

    <div class="grid grid5"></div>

    <div class="grid grid6"></div>

    <div class="grid grid7"></div>

    <div class="grid grid8"></div>

    <div class="grid grid9"></div>

</div>





.gridcontainer {

    display: grid;

    grid-template-columns: repeat(6,1fr);

    grid-template-rows: auto;

    grid-column-gap: 1px;

    grid-auto-flow: row;

    position: relative;

    top: 0;

    width: 90vw;

    height: 100%;

    margin: auto;

    overflow: hidden;

    max-width: 1800px;

    background-color: transparent;

    z-index: 6;

    grid-template-areas: 

        "head head head . . ."

        "head head head . . ."

        "head head head . . ."

        ;

}

.grid {

    position: relative;

    /* Limits the size of the grid and resizes based on viewport size */

    height: calc(90vw / 6);

    max-height: 300px;

    width: calc(90vw / 6);

    max-width: 300px;

    background-color: transparent;

    z-index: 100;

    left: 1px;

}

.header {

    grid-area: head;

    background-color: blue;

}

.title {

    grid-area: 1 / 1 / 3 / 3;

}

I expected the headergraphic (or at least the background-color) to span a 3x3 space of a 6 column grid, but instead its being limited to the first grid cell.
Here is my current result, what I expected and the idea for the end layout: https://imgur.com/a/7b8tDWt

asked Jan 20 at 12:16

Joachim

182

add a comment |

<div class="gridcontainer">

    <div class="grid grid1 header">

        <img src="images/headergraphic.svg" alt="Header graphic" class="title">

    </div>

    <div class="grid grid2"></div>

    <div class="grid grid3"></div>

    <div class="grid grid4"></div>

    <div class="grid grid5"></div>

    <div class="grid grid6"></div>

    <div class="grid grid7"></div>

    <div class="grid grid8"></div>

    <div class="grid grid9"></div>

</div>





.gridcontainer {

    display: grid;

    grid-template-columns: repeat(6,1fr);

    grid-template-rows: auto;

    grid-column-gap: 1px;

    grid-auto-flow: row;

    position: relative;

    top: 0;

    width: 90vw;

    height: 100%;

    margin: auto;

    overflow: hidden;

    max-width: 1800px;

    background-color: transparent;

    z-index: 6;

    grid-template-areas: 

        "head head head . . ."

        "head head head . . ."

        "head head head . . ."

        ;

}

.grid {

    position: relative;

    /* Limits the size of the grid and resizes based on viewport size */

    height: calc(90vw / 6);

    max-height: 300px;

    width: calc(90vw / 6);

    max-width: 300px;

    background-color: transparent;

    z-index: 100;

    left: 1px;

}

.header {

    grid-area: head;

    background-color: blue;

}

.title {

    grid-area: 1 / 1 / 3 / 3;

}

asked Jan 20 at 12:16

Joachim

182

add a comment |

<div class="gridcontainer">

    <div class="grid grid1 header">

        <img src="images/headergraphic.svg" alt="Header graphic" class="title">

    </div>

    <div class="grid grid2"></div>

    <div class="grid grid3"></div>

    <div class="grid grid4"></div>

    <div class="grid grid5"></div>

    <div class="grid grid6"></div>

    <div class="grid grid7"></div>

    <div class="grid grid8"></div>

    <div class="grid grid9"></div>

</div>





.gridcontainer {

    display: grid;

    grid-template-columns: repeat(6,1fr);

    grid-template-rows: auto;

    grid-column-gap: 1px;

    grid-auto-flow: row;

    position: relative;

    top: 0;

    width: 90vw;

    height: 100%;

    margin: auto;

    overflow: hidden;

    max-width: 1800px;

    background-color: transparent;

    z-index: 6;

    grid-template-areas: 

        "head head head . . ."

        "head head head . . ."

        "head head head . . ."

        ;

}

.grid {

    position: relative;

    /* Limits the size of the grid and resizes based on viewport size */

    height: calc(90vw / 6);

    max-height: 300px;

    width: calc(90vw / 6);

    max-width: 300px;

    background-color: transparent;

    z-index: 100;

    left: 1px;

}

.header {

    grid-area: head;

    background-color: blue;

}

.title {

    grid-area: 1 / 1 / 3 / 3;

}

asked Jan 20 at 12:16

Joachim

182

<div class="gridcontainer">

    <div class="grid grid1 header">

        <img src="images/headergraphic.svg" alt="Header graphic" class="title">

    </div>

    <div class="grid grid2"></div>

    <div class="grid grid3"></div>

    <div class="grid grid4"></div>

    <div class="grid grid5"></div>

    <div class="grid grid6"></div>

    <div class="grid grid7"></div>

    <div class="grid grid8"></div>

    <div class="grid grid9"></div>

</div>





.gridcontainer {

    display: grid;

    grid-template-columns: repeat(6,1fr);

    grid-template-rows: auto;

    grid-column-gap: 1px;

    grid-auto-flow: row;

    position: relative;

    top: 0;

    width: 90vw;

    height: 100%;

    margin: auto;

    overflow: hidden;

    max-width: 1800px;

    background-color: transparent;

    z-index: 6;

    grid-template-areas: 

        "head head head . . ."

        "head head head . . ."

        "head head head . . ."

        ;

}

.grid {

    position: relative;

    /* Limits the size of the grid and resizes based on viewport size */

    height: calc(90vw / 6);

    max-height: 300px;

    width: calc(90vw / 6);

    max-width: 300px;

    background-color: transparent;

    z-index: 100;

    left: 1px;

}

.header {

    grid-area: head;

    background-color: blue;

}

.title {

    grid-area: 1 / 1 / 3 / 3;

}

html css css-grid

asked Jan 20 at 12:16

Joachim

182

asked Jan 20 at 12:16

Joachim

182

asked Jan 20 at 12:16

Joachim

182

asked Jan 20 at 12:16

Joachim

182

asked Jan 20 at 12:16

Joachim

182

add a comment |

1 Answer
1

active

oldest

votes

This is due to the limitation of width/height you apply to the grid item. You can use not() to avoid this on the header or simply remove grid class.

.gridcontainer {

    display: grid;

    grid-template-columns: repeat(6,1fr);

    grid-template-rows: auto;

    grid-column-gap: 1px;

    grid-auto-flow: row;

    position: relative;

    top: 0;

    width: 90vw;

    height: 100%;

    margin: auto;

    overflow: hidden;

    max-width: 1800px;

    background-color: transparent;

    z-index: 6;

    grid-template-areas: 

        "head head head . . ."

        "head head head . . ."

        "head head head . . ."

        ;

}

.grid:not(.header) {

    position: relative;

    /* Limits the size of the grid and resizes based on viewport size */

    height: calc(90vw / 6);

    max-height: 300px;

    width: calc(90vw / 6);

    max-width: 300px;

    background-color: transparent;

    z-index: 100;

    left: 1px;

    box-shadow:0 0 2px #000 inset;

}

.header {

    grid-area: head;

    background-color: blue;

}

.title {

    grid-area: 1 / 1 / 3 / 3;

}

<div class="gridcontainer">

    <div class="grid grid1 header">

        <img src="images/headergraphic.svg" alt="Header graphic" class="title">

    </div>

    <div class="grid grid2"></div>

    <div class="grid grid3"></div>

    <div class="grid grid4"></div>

    <div class="grid grid5"></div>

    <div class="grid grid6"></div>

    <div class="grid grid7"></div>

    <div class="grid grid8"></div>

    <div class="grid grid9"></div>

</div>

answered Jan 20 at 14:44

Temani Afif

71.9k94080

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

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54276322%2fhow-to-span-an-image-across-multiple-grid-items-using-grid-template-areas%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

This is due to the limitation of width/height you apply to the grid item. You can use not() to avoid this on the header or simply remove grid class.

.gridcontainer {

    display: grid;

    grid-template-columns: repeat(6,1fr);

    grid-template-rows: auto;

    grid-column-gap: 1px;

    grid-auto-flow: row;

    position: relative;

    top: 0;

    width: 90vw;

    height: 100%;

    margin: auto;

    overflow: hidden;

    max-width: 1800px;

    background-color: transparent;

    z-index: 6;

    grid-template-areas: 

        "head head head . . ."

        "head head head . . ."

        "head head head . . ."

        ;

}

.grid:not(.header) {

    position: relative;

    /* Limits the size of the grid and resizes based on viewport size */

    height: calc(90vw / 6);

    max-height: 300px;

    width: calc(90vw / 6);

    max-width: 300px;

    background-color: transparent;

    z-index: 100;

    left: 1px;

    box-shadow:0 0 2px #000 inset;

}

.header {

    grid-area: head;

    background-color: blue;

}

.title {

    grid-area: 1 / 1 / 3 / 3;

}

<div class="gridcontainer">

    <div class="grid grid1 header">

        <img src="images/headergraphic.svg" alt="Header graphic" class="title">

    </div>

    <div class="grid grid2"></div>

    <div class="grid grid3"></div>

    <div class="grid grid4"></div>

    <div class="grid grid5"></div>

    <div class="grid grid6"></div>

    <div class="grid grid7"></div>

    <div class="grid grid8"></div>

    <div class="grid grid9"></div>

</div>

answered Jan 20 at 14:44

Temani Afif

71.9k94080

add a comment |

This is due to the limitation of width/height you apply to the grid item. You can use not() to avoid this on the header or simply remove grid class.

.gridcontainer {

    display: grid;

    grid-template-columns: repeat(6,1fr);

    grid-template-rows: auto;

    grid-column-gap: 1px;

    grid-auto-flow: row;

    position: relative;

    top: 0;

    width: 90vw;

    height: 100%;

    margin: auto;

    overflow: hidden;

    max-width: 1800px;

    background-color: transparent;

    z-index: 6;

    grid-template-areas: 

        "head head head . . ."

        "head head head . . ."

        "head head head . . ."

        ;

}

.grid:not(.header) {

    position: relative;

    /* Limits the size of the grid and resizes based on viewport size */

    height: calc(90vw / 6);

    max-height: 300px;

    width: calc(90vw / 6);

    max-width: 300px;

    background-color: transparent;

    z-index: 100;

    left: 1px;

    box-shadow:0 0 2px #000 inset;

}

.header {

    grid-area: head;

    background-color: blue;

}

.title {

    grid-area: 1 / 1 / 3 / 3;

}

<div class="gridcontainer">

    <div class="grid grid1 header">

        <img src="images/headergraphic.svg" alt="Header graphic" class="title">

    </div>

    <div class="grid grid2"></div>

    <div class="grid grid3"></div>

    <div class="grid grid4"></div>

    <div class="grid grid5"></div>

    <div class="grid grid6"></div>

    <div class="grid grid7"></div>

    <div class="grid grid8"></div>

    <div class="grid grid9"></div>

</div>

answered Jan 20 at 14:44

Temani Afif

71.9k94080

add a comment |

This is due to the limitation of width/height you apply to the grid item. You can use not() to avoid this on the header or simply remove grid class.

.gridcontainer {

    display: grid;

    grid-template-columns: repeat(6,1fr);

    grid-template-rows: auto;

    grid-column-gap: 1px;

    grid-auto-flow: row;

    position: relative;

    top: 0;

    width: 90vw;

    height: 100%;

    margin: auto;

    overflow: hidden;

    max-width: 1800px;

    background-color: transparent;

    z-index: 6;

    grid-template-areas: 

        "head head head . . ."

        "head head head . . ."

        "head head head . . ."

        ;

}

.grid:not(.header) {

    position: relative;

    /* Limits the size of the grid and resizes based on viewport size */

    height: calc(90vw / 6);

    max-height: 300px;

    width: calc(90vw / 6);

    max-width: 300px;

    background-color: transparent;

    z-index: 100;

    left: 1px;

    box-shadow:0 0 2px #000 inset;

}

.header {

    grid-area: head;

    background-color: blue;

}

.title {

    grid-area: 1 / 1 / 3 / 3;

}

<div class="gridcontainer">

    <div class="grid grid1 header">

        <img src="images/headergraphic.svg" alt="Header graphic" class="title">

    </div>

    <div class="grid grid2"></div>

    <div class="grid grid3"></div>

    <div class="grid grid4"></div>

    <div class="grid grid5"></div>

    <div class="grid grid6"></div>

    <div class="grid grid7"></div>

    <div class="grid grid8"></div>

    <div class="grid grid9"></div>

</div>

answered Jan 20 at 14:44

Temani Afif

71.9k94080

This is due to the limitation of width/height you apply to the grid item. You can use not() to avoid this on the header or simply remove grid class.

.gridcontainer {

    display: grid;

    grid-template-columns: repeat(6,1fr);

    grid-template-rows: auto;

    grid-column-gap: 1px;

    grid-auto-flow: row;

    position: relative;

    top: 0;

    width: 90vw;

    height: 100%;

    margin: auto;

    overflow: hidden;

    max-width: 1800px;

    background-color: transparent;

    z-index: 6;

    grid-template-areas: 

        "head head head . . ."

        "head head head . . ."

        "head head head . . ."

        ;

}

.grid:not(.header) {

    position: relative;

    /* Limits the size of the grid and resizes based on viewport size */

    height: calc(90vw / 6);

    max-height: 300px;

    width: calc(90vw / 6);

    max-width: 300px;

    background-color: transparent;

    z-index: 100;

    left: 1px;

    box-shadow:0 0 2px #000 inset;

}

.header {

    grid-area: head;

    background-color: blue;

}

.title {

    grid-area: 1 / 1 / 3 / 3;

}

<div class="gridcontainer">

    <div class="grid grid1 header">

        <img src="images/headergraphic.svg" alt="Header graphic" class="title">

    </div>

    <div class="grid grid2"></div>

    <div class="grid grid3"></div>

    <div class="grid grid4"></div>

    <div class="grid grid5"></div>

    <div class="grid grid6"></div>

    <div class="grid grid7"></div>

    <div class="grid grid8"></div>

    <div class="grid grid9"></div>

</div>

.gridcontainer {

    display: grid;

    grid-template-columns: repeat(6,1fr);

    grid-template-rows: auto;

    grid-column-gap: 1px;

    grid-auto-flow: row;

    position: relative;

    top: 0;

    width: 90vw;

    height: 100%;

    margin: auto;

    overflow: hidden;

    max-width: 1800px;

    background-color: transparent;

    z-index: 6;

    grid-template-areas: 

        "head head head . . ."

        "head head head . . ."

        "head head head . . ."

        ;

}

.grid:not(.header) {

    position: relative;

    /* Limits the size of the grid and resizes based on viewport size */

    height: calc(90vw / 6);

    max-height: 300px;

    width: calc(90vw / 6);

    max-width: 300px;

    background-color: transparent;

    z-index: 100;

    left: 1px;

    box-shadow:0 0 2px #000 inset;

}

.header {

    grid-area: head;

    background-color: blue;

}

.title {

    grid-area: 1 / 1 / 3 / 3;

}

<div class="gridcontainer">

    <div class="grid grid1 header">

        <img src="images/headergraphic.svg" alt="Header graphic" class="title">

    </div>

    <div class="grid grid2"></div>

    <div class="grid grid3"></div>

    <div class="grid grid4"></div>

    <div class="grid grid5"></div>

    <div class="grid grid6"></div>

    <div class="grid grid7"></div>

    <div class="grid grid8"></div>

    <div class="grid grid9"></div>

</div>

.gridcontainer {

    display: grid;

    grid-template-columns: repeat(6,1fr);

    grid-template-rows: auto;

    grid-column-gap: 1px;

    grid-auto-flow: row;

    position: relative;

    top: 0;

    width: 90vw;

    height: 100%;

    margin: auto;

    overflow: hidden;

    max-width: 1800px;

    background-color: transparent;

    z-index: 6;

    grid-template-areas: 

        "head head head . . ."

        "head head head . . ."

        "head head head . . ."

        ;

}

.grid:not(.header) {

    position: relative;

    /* Limits the size of the grid and resizes based on viewport size */

    height: calc(90vw / 6);

    max-height: 300px;

    width: calc(90vw / 6);

    max-width: 300px;

    background-color: transparent;

    z-index: 100;

    left: 1px;

    box-shadow:0 0 2px #000 inset;

}

.header {

    grid-area: head;

    background-color: blue;

}

.title {

    grid-area: 1 / 1 / 3 / 3;

}

<div class="gridcontainer">

    <div class="grid grid1 header">

        <img src="images/headergraphic.svg" alt="Header graphic" class="title">

    </div>

    <div class="grid grid2"></div>

    <div class="grid grid3"></div>

    <div class="grid grid4"></div>

    <div class="grid grid5"></div>

    <div class="grid grid6"></div>

    <div class="grid grid7"></div>

    <div class="grid grid8"></div>

    <div class="grid grid9"></div>

</div>

answered Jan 20 at 14:44

Temani Afif

71.9k94080

answered Jan 20 at 14:44

Temani Afif

71.9k94080

answered Jan 20 at 14:44

Temani Afif

71.9k94080

answered Jan 20 at 14:44

Temani Afif

71.9k94080

add a comment |

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.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Brtdku