CODEWITHSUNDEEP
htmlcsscss-grid
s.kuznetsov
s.kuznetsov

Reputation: 15213

Layout of items using grid-template-areas

I am unable to create the layout template the way I want using grid-template-areas, a display grid.

I need this arrangement:

input_1 input_1
input_2 input_3
input_4 input_4
input_5 input_5
input_6 input_7 input_8

I have already done similar templates on the grid-template-areas principle, and I have experience with grid, but I do not understand why this template of mine does not work.

Also, I tried to use symbolic dots - ., but it didn't help.

I know I am making a small mistake, and perhaps a stupid one, but I cannot find this error.

Thanks for your responsiveness and your time.

form {
    display: grid;
    grid-template-areas: 'input_1 input_1' 
                         'input_2 input_3' 
                         'input_4 input_4' 
                         'input_5 input_5' 
                         'input_6 input_7 input_8';    
}

.input_1 {
    grid-area: input_1;
}

.input_2 {
    grid-area: input_2;
}

.input_3 {
    grid-area: input_3;
}

.input_4 {
    grid-area: input_4;
}

.input_5 {
    grid-area: input_5;
}

.input_6 {
    grid-area: input_6;
}

.input_7 {
    grid-area: input_7;
}

.input_8 {
    grid-area: input_8;
}
<form>
  <input class="input_1" type="text">
  <input class="input_2" type="text">
  <input class="input_3" type="text">
  <input class="input_4" type="text">
  <input class="input_5" type="text">
  <input class="input_6" type="text">
  <input class="input_7" type="text">
  <input class="input_8" type="text">
</form>

Upvotes: 0

Views: 98

Answers (2)

Temani Afif
Temani Afif

Reputation: 272842

You need to have 6 columns to get such configuration. One row is having 2 columns, another one is having 3 so the smallest number that can be divided by 2 and 3 is 6

form {
    display: grid;
    grid-gap: 5px;
    grid-template-areas: 'input_1 input_1 input_1 input_1 input_1 input_1' 
                         'input_2 input_2 input_2 input_3 input_3 input_3' 
                         'input_4 input_4 input_4 input_4 input_4 input_4' 
                         'input_5 input_5 input_5 input_5 input_5 input_5' 
                         'input_6 input_6 input_7 input_7 input_8 input_8';    
}

.input_1 {
    grid-area: input_1;
}

.input_2 {
    grid-area: input_2;
}

.input_3 {
    grid-area: input_3;
}

.input_4 {
    grid-area: input_4;
}

.input_5 {
    grid-area: input_5;
}

.input_6 {
    grid-area: input_6;
}

.input_7 {
    grid-area: input_7;
}

.input_8 {
    grid-area: input_8;
}
<form>
  <input class="input_1" type="text">
  <input class="input_2" type="text">
  <input class="input_3" type="text">
  <input class="input_4" type="text">
  <input class="input_5" type="text">
  <input class="input_6" type="text">
  <input class="input_7" type="text">
  <input class="input_8" type="text">
</form>

Upvotes: 2

Dawid .T
Dawid .T

Reputation: 104

I've added "." to the grid-template-areas and it seems to work

form {
display: grid;
grid-template-areas:
    'input_1 input_1 .'
    'input_2 input_3 .'
    'input_4 input_4 .'
    'input_5 input_5 .'
    'input_6 input_7 input_8';
}

Upvotes: 0

Related Questions