Стани премиум член и добиј попуст на 2000+ производи и куп други бенефити!
  • Важно
    Имате проблем со најава или регистрација на it.mk?
    Побарајте го решението на вашиот проблем ТУКА!

Помош HTML Grid

LambertGolden

Gaining Experience
4 декември 2019
195
81
Дечки, вежбам CSS* Grid, па ми треба помош околу нешто што сакам да постигнам.
Сакам да го ископирам дизајнот на овој калкулатор(https://user-images.githubusercontent.com/48981108/56517653-6da3ae80-650b-11e9-8f8d-00c073ae08ce.png) но со помош на грид,
заглавив кај divot кој има property: grid-column:1/-2, тоа што сакам да го постигнам е бројката 2 да ја претставам како друг Блок,
па на тој начин потоа да ја шетам внатре во дивот со property: grid-column:1/-2, бројката два да ја ставам или над бројката 4 или над бројката 6.
Еве го кодот
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
main {
min-height: 100vh;
background-color: azure;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
}
.container {
width: 400px;
height: 500px;
background-color: rgb(51, 38, 91);
display: grid;
gap: 10px;
grid-template-columns: repeat(4, 1fr) ;
}
.block {
border: 2px solid red;
background-color: aqua;

display: flex;
align-items: center;
justify-content: center;

}
.block1 {
background-color: #1e1e1e;
grid-column: 1 / -1;
margin-bottom: -10px;
}
.block2{

grid-column: 1/-2;
}


</style>
</head>
<body>
<main>
<div class="container">
<div class="block block1"> 1</div>

<div class="block block2">2



</div>






<div class="block block3">3</div>
<div class="block block4">4</div>
<div class="block block5">5</div>
<div class="block block6">6</div>
<div class="block block7">7</div>
<div class="block block8">8</div>
<div class="block block9">9</div>
<div class="block block10">10</div>
<div class="block block11">11</div>
<div class="block block12">12</div>
<div class="block block13">13</div>
<div class="block block14">14</div>
<div class="block block15">15</div>
<div class="block block16">16</div>
<div class="block block17">17</div>
<div class="block block18">18</div>

</div>
</main>
</body>
</html>
 
Последна промена:

stevo1337

Gaining Experience
17 септември 2012
308
257
Битола
stevo1337's setup  
Processor & Cooler
AMD Ryzen 7 3700X + Arctic Liquid Freezer III 280
Motherboard
ASUS TUF B450-PLUS GAMING
Storage
Samsung 970 EVO Plus 500GB, Samsung 860 EVO 500GB X2
PSU
NZXT C650
RAM
G.SKILL Trident Z RGB DDR4-3200 32GB
Video card
ASUS ROG STRIX RX5700XT O8G GAMING
Case
NZXT H7 Flow
Mouse
Logitech G Pro X Superlight
Keyboard
Keychron K2
Audio
HyperX Cloud Flight
Monitor
ASUS TUF VG27AQL1A

Isak Keyten

Practice makes perfect
25 ноември 2014
1.279
1.456
Скопје
Isak Keyten's setup  
Processor & Cooler
Intel® Core™ i5-4460 Processor 6M Cache, 3.20 GHz Haswell 22nm Technology
Motherboard
ASUS H81M-K (SOCKET 1150)
Storage
Samsung SSD 850 PRO 120GB
PSU
Thermaltake TR2 Bronze 700W
RAM
Kingston HyperX DDR3 16GB 1600Mhz Dual-channel
Video card
ASUS AMD Radeon R9 280x 3072MB
Mouse
Logitech G603 LIGHTSPEED
OS
Windows 10 :(
HTML:
    <div class="calculator">
        <div class="screen">Screen</div>
        <button class="button c">C</button>
        <button class="button operator">/</button>
        <button class="button">7</button>
        <button class="button">8</button>
        <button class="button">9</button>
        <button class="button operator">*</button>
        <button class="button">4</button>
        <button class="button">5</button>
        <button class="button">6</button>
        <button class="button operator">-</button>
        <button class="button">1</button>
        <button class="button">2</button>
        <button class="button">3</button>
        <button class="button operator">+</button>
        <button class="button zero">0</button>
        <button class="button">.</button>
        <button class="button equals">=</button>
    </div>

    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .calculator {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(5, 1fr);
            grid-gap: 5px;
            width: 300px;
            background-color: black;
            border-radius: 10px;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

        .screen {
            grid-column: 1 / span 4;
            grid-row: 1;
            background-color: #333;
            color: white;
            text-align: right;
            padding: 10px;
            border-radius: 5px;
        }

        .button {
            text-align: center;
            font-size: 24px;
            background-color: #4caf50;
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
            border-radius: 5px;
        }

        .button.c {
            grid-column: 1 / span 3;
        }

        .button.operator {
            background-color: #ff9900;
        }

        .button.zero {
            grid-column: 1 / span 2;
        }

        .button.equals {
            grid-row: 6;
            grid-column: 4;
            background-color: #ff9900;
        }
    </style>
ChatGPT го напраи ова ^
И изглеа вака
1697410898237.png

Користете ChatGPT дур е фри и учете дур има уште вработувања :))
 

LambertGolden

Gaining Experience
4 декември 2019
195
81
HTML:
    <div class="calculator">
        <div class="screen">Screen</div>
        <button class="button c">C</button>
        <button class="button operator">/</button>
        <button class="button">7</button>
        <button class="button">8</button>
        <button class="button">9</button>
        <button class="button operator">*</button>
        <button class="button">4</button>
        <button class="button">5</button>
        <button class="button">6</button>
        <button class="button operator">-</button>
        <button class="button">1</button>
        <button class="button">2</button>
        <button class="button">3</button>
        <button class="button operator">+</button>
        <button class="button zero">0</button>
        <button class="button">.</button>
        <button class="button equals">=</button>
    </div>

    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .calculator {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(5, 1fr);
            grid-gap: 5px;
            width: 300px;
            background-color: black;
            border-radius: 10px;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

        .screen {
            grid-column: 1 / span 4;
            grid-row: 1;
            background-color: #333;
            color: white;
            text-align: right;
            padding: 10px;
            border-radius: 5px;
        }

        .button {
            text-align: center;
            font-size: 24px;
            background-color: #4caf50;
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
            border-radius: 5px;
        }

        .button.c {
            grid-column: 1 / span 3;
        }

        .button.operator {
            background-color: #ff9900;
        }

        .button.zero {
            grid-column: 1 / span 2;
        }

        .button.equals {
            grid-row: 6;
            grid-column: 4;
            background-color: #ff9900;
        }
    </style>
ChatGPT го напраи ова ^
И изглеа вака
Погледнете го атачментот 130495

Користете ChatGPT дур е фри и учете дур има уште вработувања :))
Не сакам да го добијам ова, сакам буквата ‘C’ да биде веднаш над 9ката или веднаш над 7ката во случајот и да биде точно над нејзе а не малку лево или десно.
 

Cypher

Gaining Experience
29 јули 2012
281
123
Не сакам да го добијам ова, сакам буквата ‘C’ да биде веднаш над 9ката или веднаш над 7ката во случајот и да биде точно над нејзе а не малку лево или десно.
дај му само text-align:left; na C копчето.

button#clear {
text-align: left;
padding-left: 25px;
}
1697444381935.png
 

LambertGolden

Gaining Experience
4 декември 2019
195
81
дај му само text-align:left; na C копчето.

button#clear {
text-align: left;
padding-left: 25px;
}
Погледнете го атачментот 130502
А без padding, може ова некако да се изведе?
Пример внатре во блокот кај што е C да се креира уште еден див на кој шо ќе му се стави grid-column 1/span 1 или grid-column: 2/span 1(2/3)
 

Isak Keyten

Practice makes perfect
25 ноември 2014
1.279
1.456
Скопје
Isak Keyten's setup  
Processor & Cooler
Intel® Core™ i5-4460 Processor 6M Cache, 3.20 GHz Haswell 22nm Technology
Motherboard
ASUS H81M-K (SOCKET 1150)
Storage
Samsung SSD 850 PRO 120GB
PSU
Thermaltake TR2 Bronze 700W
RAM
Kingston HyperX DDR3 16GB 1600Mhz Dual-channel
Video card
ASUS AMD Radeon R9 280x 3072MB
Mouse
Logitech G603 LIGHTSPEED
OS
Windows 10 :(
Зошто сакам да извежбам грид и ме интересира дали е можно да се направи со грид тоа што го барам.
Нема поента ова. Паддинг е за паддинг. Мислам ти си знаеш за “вежбање грид“ ама тоа ти е ко да каеш дали можам да користам чекан за бејзбол за да се извежбам како чекан се користи.
 

Нови мислења

Последни Теми

Статистика

Теми
47.228
Мислења
976.915
Членови
35.537
Најнов член
martin987
На врв Дно