Помош HTML Grid

LambertGolden · 15 октомври 2023

Дечки, вежбам 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 · 15 октомври 2023

https://codepen.io/

Isak Keyten · 16 октомври 2023

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 го напраи ова ^
И изглеа вака

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

)

Pulse · 16 октомври 2023

GPT-3.5

Код:

https://jsfiddle.net/6w09y8zx/

2023-10-16 01_10_31-JSFiddle - Code Playground — Mozilla Firefox.png

LambertGolden · 16 октомври 2023

Isak Keyten напиша:

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 · 16 октомври 2023

LambertGolden напиша:
Не сакам да го добијам ова, сакам буквата ‘C’ да биде веднаш над 9ката или веднаш над 7ката во случајот и да биде точно над нејзе а не малку лево или десно.

дај му само text-align:left; na C копчето.

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

LambertGolden · 16 октомври 2023

Cypher напиша:
дај му само 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)

Cypher · 16 октомври 2023

LambertGolden напиша:
А без padding, може ова некако да се изведе?
Пример внатре во блокот кај што е C да се креира уште еден див на кој шо ќе му се стави grid-column 1/span 1 или grid-column: 2/span 1(2/3)

а зошто неќеш padding?

LambertGolden · 16 октомври 2023

Cypher напиша:
а зошто неќеш padding?

Зошто сакам да извежбам грид и ме интересира дали е можно да се направи со грид тоа што го барам.

Isak Keyten · 21 октомври 2023

LambertGolden напиша:
Зошто сакам да извежбам грид и ме интересира дали е можно да се направи со грид тоа што го барам.

Нема поента ова. Паддинг е за паддинг. Мислам ти си знаеш за “вежбање грид“ ама тоа ти е ко да каеш дали можам да користам чекан за бејзбол за да се извежбам како чекан се користи.

Помош HTML Grid

LambertGolden

Gaining Experience

stevo1337

Gaining Experience

Isak Keyten

Practice makes perfect

Pulse

Practice makes perfect

LambertGolden

Gaining Experience

Cypher

Gaining Experience

LambertGolden

Gaining Experience

Cypher

Gaining Experience

LambertGolden

Gaining Experience

Isak Keyten

Practice makes perfect

Нови мислења

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

Онлајн членови

Статистика

ит маркет