How to get the actual grid-row value of a cell?

cell is a jQuery object of for a div inside a CSS grid layout.

This: cell.css("grid-row")

Returns this: auto / auto

How can I get the actual numeric row value of the cell?

Fiddle: https://jsfiddle.net/9gepnLhk/2/

When you open the console, you can see the output as auto / auto. I want 1 / span 1 or 1 / 2 etc. so I can get the first character, in this case, 1.

edited Jan 1 at 11:17

asked Jan 1 at 11:01

S. Tarık Çetin

346614

Try to use cell.outerHeight() api.jquery.com/outerheight.

– Deniz
Jan 1 at 11:03

2

Would you create a jsfiddle sample to make your question clear? jsfiddle.net

– Deniz
Jan 1 at 11:06

@Deniz Added to the question.

– S. Tarık Çetin
Jan 1 at 11:12

You are not adding grid-row property to cell by yourself. jQuery is returning the default value. If you add grid-row to cell, you will get your value. jsfiddle.net/4brvo92g

– Nafees Anwar
Jan 1 at 11:20

You can have it by using height() method and if you have margin/paddings you can use outerHeight() jsfiddle.net/9gepnLhk/4 Is not that the answer what you are looking for? If not, can you be more specific?

– Deniz
Jan 1 at 11:36

|
show 1 more comment

cell is a jQuery object of for a div inside a CSS grid layout.

This: cell.css("grid-row")

Returns this: auto / auto

How can I get the actual numeric row value of the cell?

Fiddle: https://jsfiddle.net/9gepnLhk/2/

When you open the console, you can see the output as auto / auto. I want 1 / span 1 or 1 / 2 etc. so I can get the first character, in this case, 1.

edited Jan 1 at 11:17

asked Jan 1 at 11:01

S. Tarık Çetin

346614

Try to use cell.outerHeight() api.jquery.com/outerheight.

– Deniz
Jan 1 at 11:03

2

Would you create a jsfiddle sample to make your question clear? jsfiddle.net

– Deniz
Jan 1 at 11:06

@Deniz Added to the question.

– S. Tarık Çetin
Jan 1 at 11:12

You are not adding grid-row property to cell by yourself. jQuery is returning the default value. If you add grid-row to cell, you will get your value. jsfiddle.net/4brvo92g

– Nafees Anwar
Jan 1 at 11:20

You can have it by using height() method and if you have margin/paddings you can use outerHeight() jsfiddle.net/9gepnLhk/4 Is not that the answer what you are looking for? If not, can you be more specific?

– Deniz
Jan 1 at 11:36

|
show 1 more comment

cell is a jQuery object of for a div inside a CSS grid layout.

This: cell.css("grid-row")

Returns this: auto / auto

How can I get the actual numeric row value of the cell?

Fiddle: https://jsfiddle.net/9gepnLhk/2/

When you open the console, you can see the output as auto / auto. I want 1 / span 1 or 1 / 2 etc. so I can get the first character, in this case, 1.

edited Jan 1 at 11:17

asked Jan 1 at 11:01

S. Tarık Çetin

346614

cell is a jQuery object of for a div inside a CSS grid layout.

This: cell.css("grid-row")

Returns this: auto / auto

How can I get the actual numeric row value of the cell?

Fiddle: https://jsfiddle.net/9gepnLhk/2/

When you open the console, you can see the output as auto / auto. I want 1 / span 1 or 1 / 2 etc. so I can get the first character, in this case, 1.

jquery css

edited Jan 1 at 11:17

asked Jan 1 at 11:01

S. Tarık Çetin

346614

edited Jan 1 at 11:17

asked Jan 1 at 11:01

S. Tarık Çetin

346614

edited Jan 1 at 11:17

asked Jan 1 at 11:01

S. Tarık Çetin

346614

asked Jan 1 at 11:01

S. Tarık Çetin

346614

asked Jan 1 at 11:01

S. Tarık Çetin

346614

Try to use cell.outerHeight() api.jquery.com/outerheight.

– Deniz
Jan 1 at 11:03

2

Would you create a jsfiddle sample to make your question clear? jsfiddle.net

– Deniz
Jan 1 at 11:06

@Deniz Added to the question.

– S. Tarık Çetin
Jan 1 at 11:12

You are not adding grid-row property to cell by yourself. jQuery is returning the default value. If you add grid-row to cell, you will get your value. jsfiddle.net/4brvo92g

– Nafees Anwar
Jan 1 at 11:20

You can have it by using height() method and if you have margin/paddings you can use outerHeight() jsfiddle.net/9gepnLhk/4 Is not that the answer what you are looking for? If not, can you be more specific?

– Deniz
Jan 1 at 11:36

|
show 1 more comment

Try to use cell.outerHeight() api.jquery.com/outerheight.

– Deniz
Jan 1 at 11:03

2

Would you create a jsfiddle sample to make your question clear? jsfiddle.net

– Deniz
Jan 1 at 11:06

@Deniz Added to the question.

– S. Tarık Çetin
Jan 1 at 11:12

You are not adding grid-row property to cell by yourself. jQuery is returning the default value. If you add grid-row to cell, you will get your value. jsfiddle.net/4brvo92g

– Nafees Anwar
Jan 1 at 11:20

You can have it by using height() method and if you have margin/paddings you can use outerHeight() jsfiddle.net/9gepnLhk/4 Is not that the answer what you are looking for? If not, can you be more specific?

– Deniz
Jan 1 at 11:36

Try to use cell.outerHeight() api.jquery.com/outerheight.

– Deniz
Jan 1 at 11:03

Would you create a jsfiddle sample to make your question clear? jsfiddle.net

– Deniz
Jan 1 at 11:06

@Deniz Added to the question.

– S. Tarık Çetin
Jan 1 at 11:12

You are not adding grid-row property to cell by yourself. jQuery is returning the default value. If you add grid-row to cell, you will get your value. jsfiddle.net/4brvo92g

– Nafees Anwar
Jan 1 at 11:20

You can have it by using height() method and if you have margin/paddings you can use outerHeight() jsfiddle.net/9gepnLhk/4 Is not that the answer what you are looking for? If not, can you be more specific?

– Deniz
Jan 1 at 11:36

|
show 1 more comment

4 Answers
4

active

oldest

votes

I found a dynamic solution for you. Hope it helps

$(function(){

    var rowSize =$(".cell").first().css("grid-row").split('/').length

  $(".cell").each((c,elem)=>{

    elem.innerText= Math.ceil(++c / rowSize)

  })

})

Fiddle https://jsfiddle.net/9gepnLhk/7/

answered Jan 1 at 12:36

Uğur Oruc

4610

jsfiddle.net/9gepnLhk/8 Thanks for the effort though, I appreciate it.

– S. Tarık Çetin
Jan 1 at 12:42

now you updated grid row columns so you need to update that rowSize variable for that , you cant expect to work it on every css

– Uğur Oruc
Jan 1 at 12:45

jsfiddle.net/9gepnLhk/10 here you go , this is your expected solution i guess and please stop changing the question

– Uğur Oruc
Jan 1 at 12:48

1

This one works: jsfiddle.net/9gepnLhk/11 I am accepting your answer since it was your idea, to begin with. You may want to edit your answer though, in order to help future visitors.

– S. Tarık Çetin
Jan 1 at 12:48

I did not change the question, though. Version #7 of the Fiddle was incorrect since the 'rowSize' would always equal to 2, no matter what the actual column count is. Because grid-row property is always in the format 'a / b'. I was trying to demonstrate this issue. The actual column count is given in the grid object itself with grid-template-columns property, which you figured out later as well. That being said, this solution is still not dynamic enough since we cannot guarantee someone won't use repeat function in their grid-template-columns property value.

– S. Tarık Çetin
Jan 1 at 12:57

add a comment |

From the jsfiddle I can see you haven't added any grid-row property. that's why you are getting the default auto / auto. if you add grid property like grid-row: 1 / 3; then it logs 1 / 3 to the console.

answered Jan 1 at 11:20

Partho63

1,6331722

I don't want to add a manual grid-row property. I want it to be auto. I just want to know that automatic-assigned value at the runtime.

– S. Tarık Çetin
Jan 1 at 11:21

2

I am not sure but I think it is not possible to get the actual value of auto.

– Partho63
Jan 1 at 11:35

add a comment |

You are not adding grid-row property to cell by yourself. jQuery is returning the default value. If you add grid-row to cell, you will get your value. https://jsfiddle.net/4brvo92g/

answered Jan 1 at 11:21

Nafees Anwar

306115

I don't want to add a manual grid-row property. I want it to be auto. I just want to know that automatic-assigned value at the runtime.

– S. Tarık Çetin
Jan 1 at 11:22

Automatically assigned value is what you are getting auto / auto

– Nafees Anwar
Jan 1 at 11:23

Yes I am aware of that, hence the original question.

– S. Tarık Çetin
Jan 1 at 11:23

add a comment |

I ended up hardcoding the grid-area property with jQuery. This is an ugly solution and requires knowledge about the column count beforehand, therefore it is not dynamic:

$(".cell").each(function (index) {

    $(this).text(index); // for debugging



    var col = index % 2; // 2 is the column count, hardcoded.

    var row = Math.floor(index / 2); // ditto



    $(this).css({"grid-area": (row + 1) + " / " + (col + 1) + " / span 1 / span 1"});

});

I am not marking this answer as accepted since I imagine a more dynamic approach should be possible.

Fiddle: https://jsfiddle.net/9gepnLhk/5/

answered Jan 1 at 11:48

S. Tarık Çetin

346614

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%2f53994913%2fhow-to-get-the-actual-grid-row-value-of-a-cell%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

I found a dynamic solution for you. Hope it helps

$(function(){

    var rowSize =$(".cell").first().css("grid-row").split('/').length

  $(".cell").each((c,elem)=>{

    elem.innerText= Math.ceil(++c / rowSize)

  })

})

Fiddle https://jsfiddle.net/9gepnLhk/7/

answered Jan 1 at 12:36

Uğur Oruc

4610

jsfiddle.net/9gepnLhk/8 Thanks for the effort though, I appreciate it.

– S. Tarık Çetin
Jan 1 at 12:42

now you updated grid row columns so you need to update that rowSize variable for that , you cant expect to work it on every css

– Uğur Oruc
Jan 1 at 12:45

jsfiddle.net/9gepnLhk/10 here you go , this is your expected solution i guess and please stop changing the question

– Uğur Oruc
Jan 1 at 12:48

1

This one works: jsfiddle.net/9gepnLhk/11 I am accepting your answer since it was your idea, to begin with. You may want to edit your answer though, in order to help future visitors.

– S. Tarık Çetin
Jan 1 at 12:48

I did not change the question, though. Version #7 of the Fiddle was incorrect since the 'rowSize' would always equal to 2, no matter what the actual column count is. Because grid-row property is always in the format 'a / b'. I was trying to demonstrate this issue. The actual column count is given in the grid object itself with grid-template-columns property, which you figured out later as well. That being said, this solution is still not dynamic enough since we cannot guarantee someone won't use repeat function in their grid-template-columns property value.

– S. Tarık Çetin
Jan 1 at 12:57

add a comment |

I found a dynamic solution for you. Hope it helps

$(function(){

    var rowSize =$(".cell").first().css("grid-row").split('/').length

  $(".cell").each((c,elem)=>{

    elem.innerText= Math.ceil(++c / rowSize)

  })

})

Fiddle https://jsfiddle.net/9gepnLhk/7/

answered Jan 1 at 12:36

Uğur Oruc

4610

jsfiddle.net/9gepnLhk/8 Thanks for the effort though, I appreciate it.

– S. Tarık Çetin
Jan 1 at 12:42

now you updated grid row columns so you need to update that rowSize variable for that , you cant expect to work it on every css

– Uğur Oruc
Jan 1 at 12:45

jsfiddle.net/9gepnLhk/10 here you go , this is your expected solution i guess and please stop changing the question

– Uğur Oruc
Jan 1 at 12:48

1

This one works: jsfiddle.net/9gepnLhk/11 I am accepting your answer since it was your idea, to begin with. You may want to edit your answer though, in order to help future visitors.

– S. Tarık Çetin
Jan 1 at 12:48

I did not change the question, though. Version #7 of the Fiddle was incorrect since the 'rowSize' would always equal to 2, no matter what the actual column count is. Because grid-row property is always in the format 'a / b'. I was trying to demonstrate this issue. The actual column count is given in the grid object itself with grid-template-columns property, which you figured out later as well. That being said, this solution is still not dynamic enough since we cannot guarantee someone won't use repeat function in their grid-template-columns property value.

– S. Tarık Çetin
Jan 1 at 12:57

add a comment |

I found a dynamic solution for you. Hope it helps

$(function(){

    var rowSize =$(".cell").first().css("grid-row").split('/').length

  $(".cell").each((c,elem)=>{

    elem.innerText= Math.ceil(++c / rowSize)

  })

})

Fiddle https://jsfiddle.net/9gepnLhk/7/

answered Jan 1 at 12:36

Uğur Oruc

4610

I found a dynamic solution for you. Hope it helps

$(function(){

    var rowSize =$(".cell").first().css("grid-row").split('/').length

  $(".cell").each((c,elem)=>{

    elem.innerText= Math.ceil(++c / rowSize)

  })

})

Fiddle https://jsfiddle.net/9gepnLhk/7/

answered Jan 1 at 12:36

Uğur Oruc

4610

answered Jan 1 at 12:36

Uğur Oruc

4610

answered Jan 1 at 12:36

Uğur Oruc

4610

answered Jan 1 at 12:36

Uğur Oruc

4610

jsfiddle.net/9gepnLhk/8 Thanks for the effort though, I appreciate it.

– S. Tarık Çetin
Jan 1 at 12:42

now you updated grid row columns so you need to update that rowSize variable for that , you cant expect to work it on every css

– Uğur Oruc
Jan 1 at 12:45

jsfiddle.net/9gepnLhk/10 here you go , this is your expected solution i guess and please stop changing the question

– Uğur Oruc
Jan 1 at 12:48

1

This one works: jsfiddle.net/9gepnLhk/11 I am accepting your answer since it was your idea, to begin with. You may want to edit your answer though, in order to help future visitors.

– S. Tarık Çetin
Jan 1 at 12:48

I did not change the question, though. Version #7 of the Fiddle was incorrect since the 'rowSize' would always equal to 2, no matter what the actual column count is. Because grid-row property is always in the format 'a / b'. I was trying to demonstrate this issue. The actual column count is given in the grid object itself with grid-template-columns property, which you figured out later as well. That being said, this solution is still not dynamic enough since we cannot guarantee someone won't use repeat function in their grid-template-columns property value.

– S. Tarık Çetin
Jan 1 at 12:57

add a comment |

jsfiddle.net/9gepnLhk/8 Thanks for the effort though, I appreciate it.

– S. Tarık Çetin
Jan 1 at 12:42

now you updated grid row columns so you need to update that rowSize variable for that , you cant expect to work it on every css

– Uğur Oruc
Jan 1 at 12:45

jsfiddle.net/9gepnLhk/10 here you go , this is your expected solution i guess and please stop changing the question

– Uğur Oruc
Jan 1 at 12:48

1

This one works: jsfiddle.net/9gepnLhk/11 I am accepting your answer since it was your idea, to begin with. You may want to edit your answer though, in order to help future visitors.

– S. Tarık Çetin
Jan 1 at 12:48

I did not change the question, though. Version #7 of the Fiddle was incorrect since the 'rowSize' would always equal to 2, no matter what the actual column count is. Because grid-row property is always in the format 'a / b'. I was trying to demonstrate this issue. The actual column count is given in the grid object itself with grid-template-columns property, which you figured out later as well. That being said, this solution is still not dynamic enough since we cannot guarantee someone won't use repeat function in their grid-template-columns property value.

– S. Tarık Çetin
Jan 1 at 12:57

jsfiddle.net/9gepnLhk/8 Thanks for the effort though, I appreciate it.

– S. Tarık Çetin
Jan 1 at 12:42

now you updated grid row columns so you need to update that rowSize variable for that , you cant expect to work it on every css

– Uğur Oruc
Jan 1 at 12:45

jsfiddle.net/9gepnLhk/10 here you go , this is your expected solution i guess and please stop changing the question

– Uğur Oruc
Jan 1 at 12:48

This one works: jsfiddle.net/9gepnLhk/11 I am accepting your answer since it was your idea, to begin with. You may want to edit your answer though, in order to help future visitors.

– S. Tarık Çetin
Jan 1 at 12:48

I did not change the question, though. Version #7 of the Fiddle was incorrect since the 'rowSize' would always equal to 2, no matter what the actual column count is. Because grid-row property is always in the format 'a / b'. I was trying to demonstrate this issue. The actual column count is given in the grid object itself with grid-template-columns property, which you figured out later as well. That being said, this solution is still not dynamic enough since we cannot guarantee someone won't use repeat function in their grid-template-columns property value.

– S. Tarık Çetin
Jan 1 at 12:57

add a comment |

answered Jan 1 at 11:20

Partho63

1,6331722

I don't want to add a manual grid-row property. I want it to be auto. I just want to know that automatic-assigned value at the runtime.

– S. Tarık Çetin
Jan 1 at 11:21

2

I am not sure but I think it is not possible to get the actual value of auto.

– Partho63
Jan 1 at 11:35

add a comment |

answered Jan 1 at 11:20

Partho63

1,6331722

I don't want to add a manual grid-row property. I want it to be auto. I just want to know that automatic-assigned value at the runtime.

– S. Tarık Çetin
Jan 1 at 11:21

2

I am not sure but I think it is not possible to get the actual value of auto.

– Partho63
Jan 1 at 11:35

add a comment |

answered Jan 1 at 11:20

Partho63

1,6331722

answered Jan 1 at 11:20

Partho63

1,6331722

answered Jan 1 at 11:20

Partho63

1,6331722

answered Jan 1 at 11:20

Partho63

1,6331722

answered Jan 1 at 11:20

Partho63

1,6331722

I don't want to add a manual grid-row property. I want it to be auto. I just want to know that automatic-assigned value at the runtime.

– S. Tarık Çetin
Jan 1 at 11:21

2

I am not sure but I think it is not possible to get the actual value of auto.

– Partho63
Jan 1 at 11:35

add a comment |

I don't want to add a manual grid-row property. I want it to be auto. I just want to know that automatic-assigned value at the runtime.

– S. Tarık Çetin
Jan 1 at 11:21

2

I am not sure but I think it is not possible to get the actual value of auto.

– Partho63
Jan 1 at 11:35

I don't want to add a manual grid-row property. I want it to be auto. I just want to know that automatic-assigned value at the runtime.

– S. Tarık Çetin
Jan 1 at 11:21

I am not sure but I think it is not possible to get the actual value of auto.

– Partho63
Jan 1 at 11:35

add a comment |

You are not adding grid-row property to cell by yourself. jQuery is returning the default value. If you add grid-row to cell, you will get your value. https://jsfiddle.net/4brvo92g/

answered Jan 1 at 11:21

Nafees Anwar

306115

I don't want to add a manual grid-row property. I want it to be auto. I just want to know that automatic-assigned value at the runtime.

– S. Tarık Çetin
Jan 1 at 11:22

Automatically assigned value is what you are getting auto / auto

– Nafees Anwar
Jan 1 at 11:23

Yes I am aware of that, hence the original question.

– S. Tarık Çetin
Jan 1 at 11:23

add a comment |

You are not adding grid-row property to cell by yourself. jQuery is returning the default value. If you add grid-row to cell, you will get your value. https://jsfiddle.net/4brvo92g/

answered Jan 1 at 11:21

Nafees Anwar

306115

I don't want to add a manual grid-row property. I want it to be auto. I just want to know that automatic-assigned value at the runtime.

– S. Tarık Çetin
Jan 1 at 11:22

Automatically assigned value is what you are getting auto / auto

– Nafees Anwar
Jan 1 at 11:23

Yes I am aware of that, hence the original question.

– S. Tarık Çetin
Jan 1 at 11:23

add a comment |

You are not adding grid-row property to cell by yourself. jQuery is returning the default value. If you add grid-row to cell, you will get your value. https://jsfiddle.net/4brvo92g/

answered Jan 1 at 11:21

Nafees Anwar

306115

You are not adding grid-row property to cell by yourself. jQuery is returning the default value. If you add grid-row to cell, you will get your value. https://jsfiddle.net/4brvo92g/

answered Jan 1 at 11:21

Nafees Anwar

306115

answered Jan 1 at 11:21

Nafees Anwar

306115

answered Jan 1 at 11:21

Nafees Anwar

306115

answered Jan 1 at 11:21

Nafees Anwar

306115

I don't want to add a manual grid-row property. I want it to be auto. I just want to know that automatic-assigned value at the runtime.

– S. Tarık Çetin
Jan 1 at 11:22

Automatically assigned value is what you are getting auto / auto

– Nafees Anwar
Jan 1 at 11:23

Yes I am aware of that, hence the original question.

– S. Tarık Çetin
Jan 1 at 11:23

add a comment |

I don't want to add a manual grid-row property. I want it to be auto. I just want to know that automatic-assigned value at the runtime.

– S. Tarık Çetin
Jan 1 at 11:22

Automatically assigned value is what you are getting auto / auto

– Nafees Anwar
Jan 1 at 11:23

Yes I am aware of that, hence the original question.

– S. Tarık Çetin
Jan 1 at 11:23

I don't want to add a manual grid-row property. I want it to be auto. I just want to know that automatic-assigned value at the runtime.

– S. Tarık Çetin
Jan 1 at 11:22

Automatically assigned value is what you are getting auto / auto

– Nafees Anwar
Jan 1 at 11:23

Yes I am aware of that, hence the original question.

– S. Tarık Çetin
Jan 1 at 11:23

add a comment |

I ended up hardcoding the grid-area property with jQuery. This is an ugly solution and requires knowledge about the column count beforehand, therefore it is not dynamic:

$(".cell").each(function (index) {

    $(this).text(index); // for debugging



    var col = index % 2; // 2 is the column count, hardcoded.

    var row = Math.floor(index / 2); // ditto



    $(this).css({"grid-area": (row + 1) + " / " + (col + 1) + " / span 1 / span 1"});

});

I am not marking this answer as accepted since I imagine a more dynamic approach should be possible.

Fiddle: https://jsfiddle.net/9gepnLhk/5/

answered Jan 1 at 11:48

S. Tarık Çetin

346614

add a comment |

I ended up hardcoding the grid-area property with jQuery. This is an ugly solution and requires knowledge about the column count beforehand, therefore it is not dynamic:

$(".cell").each(function (index) {

    $(this).text(index); // for debugging



    var col = index % 2; // 2 is the column count, hardcoded.

    var row = Math.floor(index / 2); // ditto



    $(this).css({"grid-area": (row + 1) + " / " + (col + 1) + " / span 1 / span 1"});

});

I am not marking this answer as accepted since I imagine a more dynamic approach should be possible.

Fiddle: https://jsfiddle.net/9gepnLhk/5/

answered Jan 1 at 11:48

S. Tarık Çetin

346614

add a comment |

I ended up hardcoding the grid-area property with jQuery. This is an ugly solution and requires knowledge about the column count beforehand, therefore it is not dynamic:

$(".cell").each(function (index) {

    $(this).text(index); // for debugging



    var col = index % 2; // 2 is the column count, hardcoded.

    var row = Math.floor(index / 2); // ditto



    $(this).css({"grid-area": (row + 1) + " / " + (col + 1) + " / span 1 / span 1"});

});

I am not marking this answer as accepted since I imagine a more dynamic approach should be possible.

Fiddle: https://jsfiddle.net/9gepnLhk/5/

answered Jan 1 at 11:48

S. Tarık Çetin

346614

I ended up hardcoding the grid-area property with jQuery. This is an ugly solution and requires knowledge about the column count beforehand, therefore it is not dynamic:

$(".cell").each(function (index) {

    $(this).text(index); // for debugging



    var col = index % 2; // 2 is the column count, hardcoded.

    var row = Math.floor(index / 2); // ditto



    $(this).css({"grid-area": (row + 1) + " / " + (col + 1) + " / span 1 / span 1"});

});

I am not marking this answer as accepted since I imagine a more dynamic approach should be possible.

Fiddle: https://jsfiddle.net/9gepnLhk/5/

answered Jan 1 at 11:48

S. Tarık Çetin

346614

answered Jan 1 at 11:48

S. Tarık Çetin

346614

answered Jan 1 at 11:48

S. Tarık Çetin

346614

answered Jan 1 at 11:48

S. Tarık Çetin

346614

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

搜尋此網誌

Bdtjtk