我是編程新手，在更改網站分辨率時，我需要元素定位方面的幫助。代碼現在可以在默認的桌面分辨率(1920 x 1080)下工作。當改變分辨率或按住CTRL并在其中滾動時，expandedButton中的文本改變了它的位置，并且它看起來非常糟糕(它超出了邊框，并且它不會調整自己以適應邊框)。如果我滾動來自動調整它的位置，我該怎么做呢？我將感激任何幫助。謝謝您們。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mano ateitis</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="Pagrindinis" class="hidden">
<div>
<h2>Mano ateitis su technologijomis</h2>
</div>
<div id="pagr2">
<div>
<button class="Mygtukas"><i class="fa-solid fa-bars"></i><br>Dabartis</button>
<div id="expandedButton">
<h3>Dabartiniai mokslai ir technologijos</h3>
<div id="scroll-container">
<div id="scroll-text">
<p> Dar visai neseniai buvau tik gimnazijos mokinys, kuris tik naudojosi sukurtais produktais. ?aid?iant ar nar?ant Internete visada buvo labai ?domu, kaip visa tai padaryta. Labai nor?jau pats kurti Internetinius puslapius, o gal net pabandyti sukurti ?aidim?.
<br/><br/>
Dabar esu gimnazistas. Savaranki?kai stengiuosi i?mokti programuoti, kad gal??iau pats prad?ti kurti ir tobulinti ?vairius programinius ?rankius. Noriu i?mokti pats sukurti Internetinius puslapius, kad ir a? gal??iau prisid?ti prie informacijos sklaidos.
<br/><br/>
Labai noriu, kad mokytojai ir d?stytojai daugiau naudot? technologini? naujovi? perduodami mums savo ?inias. Mano manymu, laikas mokykloje prad?ti naudoti tokias technologijas:
<br/><br/>
* Virtualūs laboratorijos eksperimentai – padeda mokiniams atlikti mokomuosius bandymus, kuriuos būt? sud?tinga atlikti tikrov?je, saugioje virtualioje aplinkoje.
<br/><br/>
* Augmented Reality (AR) ir Virtual Reality (VR) technologijos – ?ie inovatyvūs ?rankiai leid?ia mokiniams patirti aplink?, veiklas bei objektus tiesiog mokykloje.
<br/><br/>
* Programavimo mokymas – ?diegiant kompiuteri? programavimo pamokas, mokiniams suteikiama galimyb? i?mokti kurti programin? ?rang? ir suprasti, kaip veikia technologijos.<br/><br/>
* Personalizuotas mokymasis naudojant AI – AI pagrindu parengtos mokymosi programos gali pad?ti individualizuoti kiekvieno mokinio mokymosi strategijas. Naudojant invidualiai parengtas u?duotis ir med?iag? pagal j? poreikius ir pa?ang?.
<br/><br/>
Gal ir a? galiu pad?ti mokytojams tai padaryti !?
</p>
</div>
</div>
<!-- <div id="paveik">
<img src="" alt="programming image" id="image">
</div> -->
</div>
</div>
<div>
<button class="Mygtukas1">Netolima ateitis</button>
<div id="expandedButton1">
<h3>Mano būsimos profesijos ir pasirinktos<br/> technologijos</h3>
<p>Technologijos nuolat tobul?ja ir kei?iasi, tiesiogiai kei?ia mūs? gyvenimo būd?. ?velgdami ? ateit?, matome daug nauj? technologini? poky?i?, kurie tur?s didel? ?tak? mūs? kasdienybei ir netgi visuomen?s vystymuisi. <br/><br/>Galvoju, kad baig?s mokykl? rinksiuosi programuotojo, o gal IT saugumo specialisto keli?, o gal dideli? duomen? (Big Data) analitiko keli?? Taip pat galvoju, kad dar atsiras naujos specialyb?s, susijusios su dirbtiniu intelektu (AI), daikt? internetu (IoT), i?maniaisiais namais, o gal net centrini? bank? skaitmenin?s valiutos (CBDC) tobulinimu ir panaudojimu kasdieniniame gyvenime bei verslo ir mokslo aplinkoje.
</p>
</div>
</div>
<div>
<button class="Mygtukas2">Naujov?s</button>
<div id="expandedButton2">
<h3>Technologin?s naujov?s ir j? ?taka mano ateities planams</h3>
<div id="scroll-container">
<div id="scroll-text">
<p>Galvoju, kad technologij? naujov?s tur?s reik?ming? ?tak? mano ateities planams ?vairiais aspektais. ?tai keletas pavyzd?i?, kaip technologijos gali paveikti mano gyvenim? ir karjer?:
<br/><br/>
Darbo rinka. Automatizacija, dirbtinis intelektas (AI) ir robotizacija gali pakeisti darbo rink? ir ?gūd?i? poreik?. Vietoj sen?j? specialybi?, ateityje gali prireikti nauj?, susijusi? su IT, programavimu arba duomen? analize.
<br/><br/>
Sveikata. Naujos technologijos spar?iai kei?ia sveikatos sektori?. Telemedicina, 3D spausdinimas ir AI gali keisti sveikatos prie?iūros paslaugas ir j? kainas i? esm?s, o tai suteikia galimyb? naujiems karjeros posūkiams sveikatos pramon?je.
<br/><br/>
Bendravimo priemon?s. Socialin?s medijos, virtualios realyb?s technologijos ir mobilieji telefonai toliau kei?ia mūs? bendravimo ?pro?ius. Jie ver?ia mus prisitaikyti prie naujos informacin?s erdv?s ir naujos gyvenimo t?km?s.
<br/><br/>
Kaip matome i? pavyzd?i?, viena i? did?iausi? ateities technologij? dabartyje yra dirbtinis intelektas (AI). Manau, kad jis i? esm?s gali pakeisti moksl?, versl?, medicin? ir kitas sritis. Galvoju, kad dirbtinis intelektas padidins ?vairi? sri?i? efektyvum? bei kokyb?. Ta?iau kartu gali i?kilti daug teisini? ir etikos i??ūki?. Toki? kaip intelektin? nuosavyb? bei teisin? atsakomyb? u? AI padarytus veiksmus bei priimtus sprendimus. Tod?l galvoju, kad kol baigsiu mokykl?, visi ?ie i??ūkiai gali pakoreguoti mano planus, nes atsiras poreikis nauj? sri?i? specialistams.</p>
</div>
</div>
</div>
</div>
<div>
<button class="Mygtukas3">Neigiamas poveikis</button>
<div id="expandedButton3">
<h3>Neigiamas technologijos poveikis ekonominei ir <br/>socialinei aplinkai</h3>
<div id="scroll-container">
<div id="scroll-text">
<p>Technologijos turi didel? ?tak? ekonominei ir socialinei aplinkai. Labai nesmagu pripa?inti, kad tarp vis? teigiam? aspekt? yra ir daug neigiam?.
<br/><br/>
* Darbo viet? praradimas Automatizacija ir robotizacija kelia gr?sm? ?moni? darbo vietoms daugelyje sektori?, nes kompiuteriai, robotai ir kitos technologijos yra efektyvesni u? ?mogaus darb?.
<br/><br/>
* Socialin? atskirtis Technologij? prieinamumas yra nevienodas ?vairiems visuomen?s sluoksniams. Tod?l gali atsirasti "skaitmenin? atskirtis", kai tam tikros visuomen?s grup?s neturi galimyb?s naudotis moderniomis technologijomis.
<br/><br/>
* Privatumo stoka Technologij?, toki? kaip socialin?s medijos ar internetiniai slapukai, naudojimas gali smarkiai pa?eisti asmens privatum? ir saugum?.
<br/><br/>
* Psichologin?s ir socialin?s problemos Kompiuteriniai ?aidimai, socialin?s medijos ir interneto priklausomyb? gali sukelti psichologines ir socialines problemas, tokias kaip u?darumas, nepasitik?jimas, depresija ar ?eim? konfliktai. <br/> <br/>Vis d?lto svarbu pabr??ti, kad technologij? pl?tr? reikia palaikyti, ta?iau visada siekti ?vietimo bei ai?kaus reglamentavimo. Tai pad?t? ma?inti neigiam? technologij? poveik? ir u?tikrint? teigiam? ekonomikos bei visuomen?s vystym?si.</p>
</div>
</div>
</div>
<!-- <img src="./images/medium-shot-man-wearing-vr-glasses.jpg" alt=""> -->
</div>
<div>
<button class="Mygtukas4">Teigiamas poveikis</button>
<div id="expandedButton4">
<h3>Teigiamas technologijos poveikis ekonominei ir<br/> socialinei aplinkai</h3>
<div id="scroll-container">
<div id="scroll-text">
<p>Technologij? pl?tra, be abejo, yra vienas i? pagrindini? veiksni?, kuris veikia ekonomin? ir socialin? vystym?si visame pasaulyje. Teigiamas technologij? poveikis ekonominei ir socialinei aplinkai yra daugialypis:
<br/> <br/>
* Produktyvumo did?jimas. Naujos technologijos leid?ia efektyviau naudoti i?teklius, ma?ina gamybos laik? ir didina produktyvum?. D?l didesnio produktyvumo ?mon?s gali gaminti daugiau preki? ir paslaug? su ma?esn?mis i?laidomis, o tai prisideda prie ekonominio augimo ir nauj? darbo viet? kūrimo.
<br/> <br/>
* Nauj? pramon?s ?ak? kūrimasis. Naujausios technologijos yra varomoji j?ga nauj? pramon?s ?ak? atsiradimui, tokias kaip informacini? ir ry?i? technologij? (IRT), skaitmenin?s ekonomikos, biotechnologij? ir atsinaujinan?i? energijos ?altini? sritys.
<br/> <br/>
* Darbo viet? kūrimas. Nors technologij? pl?tra gali tur?ti neigiamo poveikio tam tikroms darbo vietoms, vis d?lto visuotinis efektas yra teigiamas. Technologij? pl?tra sukuria naujas specializuotas darbo vietas in?inieriams, programuotojams, dizaineriams ir kitoms profesijoms, kurios tiesiogiai susijusios su technologij? vystymu ir j? taikymu.
<br/> <br/>
* Susisiekimo ir informacijos sklaidos spart?jimas. Moderniosios technologijos palengvina informacijos mainus, leid?ia grei?iau ir efektyviau vykdyti verslo ir komunikacijos procesus. Tai savo ruo?tu padeda gerinti prekybos ir investicij? s?lygas ir skatina ekonomik?.
<br/> <br/>
* Socialin? integracija: technologijos padeda suma?inti socialines ?tampas ir padidina socialin?s gerov?s lyg?, pavyzd?iui, skaitmenin?s technologijos padeda pasiekti ir integravo nuo?aliuose regionuose gyvenan?ius ?mones, palengvina ne?gali?j? dalyvavim? visuomen?je.
<br/> <br/>
* ?vietimas ir mokymasis. Technologij? pl?tra leid?ia patobulinti ?vietim? ir mokym?si per internet?, atvirosios ?vietimo priemon?s ir MOOC (Massive Open Online Courses) kursus, suteikia galimybes ?mogui nuolat mokytis ir tobul?ti vis? gyvenim?.
<br/> <br/>
* Aplinkosaugos problem? ma?inimas: technologiniai sprendimai taip pat padeda suma?inti ekologin? poveik?, efektyviau naudotis i?tekliais, didinti energijos vartojimo efektyvum? ir rasti ekologi?kesni? alternatyv? neekologi?koms technologijoms.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>.Mygtukas p{
color: rgb(0, 0, 0);
font-size: 17px;
}
section {
display: grid;
place-items: center;
align-content: center;
margin-top: 0px;
min-height: 0px;
margin-bottom: 100vh;
}
h2 {
font-family: Varela Round;
color: #3c96a4;
padding: 10px;
padding-left: 5px;
padding-right: 5px;
margin-bottom: 15px;
font-size: 50px;
}
#pagr2 {
top: 0px;
padding-top: 0px;
margin-top: 0px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
button {
font-family: Open Sans, sans-serif;
letter-spacing: 6px;
font-weight: 999;
display: inline-block;
border: none;
background-color: #EBF4F7;
color: #55C9EA;
font-size: 21px;
width: 200px;
height: 90px;
flex: 0 0 200px;
right: 30px;
box-sizing: content-box;
margin-left: 20px;
margin-right: 20px;
}
button i {
opacity: 0.7;
}
#expandedButton {
display: block;
position: absolute;
top: 50%;
left: 30%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #f2f2f2;
border-radius: 10px;
z-index: 9999;
border: 2px solid #55C9EA;
width: 55%;
max-width: 5500px;
height: 90%;
max-height: 6000px;
padding-bottom: 340px;
padding-top: 180px;
margin-top: 390px;
box-sizing: border-box;
}
#expandedButton p{
font-size: 24px;
width: 80%;
position: fixed;
right: 20%;
bottom: 130px;
background-color: #f2f2f2;
color: black;
text-align: center;
}
#expandedButton h3{
background-color: #f2f2f2;
color: #3c96a4;
position: fixed;
top: 50px;
right: 300px;
font-size: 30px;
text-align: center;
}
#expandedButton1 {
display: none;
position: absolute;
top: 50%;
left: 30%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #f2f2f2;
border-radius: 10px;
z-index: 9999;
border: 2px solid #55C9EA;
width: 50%;
max-width: 5000px;
height: 70%;
max-height: 5000px;
padding-bottom: 340px;
padding-top: 180px;
margin-top: 390px;
box-sizing: border-box;
}
#expandedButton1 p{
font-size: 24px;
width: 80%;
position: fixed;
right: 10%;
bottom: 80px;
background-color: #f2f2f2;
color: black;
text-align: center;
}
#expandedButton1 h3{
background-color: #f2f2f2;
position: fixed;
color: #3c96a4;
top: 50px;
right: 220px;
font-size: 30px;
align-items: center;
align-content: center;
text-align: center;
}
#expandedButton2 {
display: none;
position: absolute;
top: 50%;
left: 30%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #f2f2f2;
border-radius: 10px;
z-index: 9999;
border: 2px solid #55C9EA;
width: 50%;
max-width: 5000px;
height: 70%;
max-height: 5000px;
padding-bottom: 340px;
padding-top: 180px;
margin-top: 390px;
box-sizing: border-box;
}
#expandedButton2 p{
font-size: 24px;
width: 80%;
position: fixed;
right: 10%;
bottom: 150px;
color: black;
background-color: #f2f2f2;
text-align: center;
}
#expandedButton2 h3{
background-color: #f2f2f2;
color: #3c96a4;
position: fixed;
top: 50px;
right: 101px;
font-size: 30px;
text-align: center;
}
#expandedButton3 {
display: none;
position: absolute;
top: 50%;
left: 30%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #f2f2f2;
border-radius: 10px;
z-index: 9999;
border: 2px solid #55C9EA;
width: 50%;
max-width: 5000px;
height: 70%;
max-height: 5000px;
padding-bottom: 390px;
padding-top: 180px;
margin-top: 420px;
box-sizing: border-box;
}
#expandedButton3 p{
font-size: 24px;
width: 90%;
position: fixed;
right: 5%;
bottom: 20px;
color: black;
background-color: #f2f2f2;
text-align: center;
}
#expandedButton3 h3{
background-color: #f2f2f2;
color: #3c96a4;
position: fixed;
top: 30px;
left: 170px;
font-size: 30px;
text-align: center;
}
#expandedButton4 {
display: none;
position: absolute;
top: 50%;
left: 30%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #f2f2f2;
border-radius: 10px;
z-index: 9999;
border: 2px solid #55C9EA;
width: 50%;
max-width: 5000px;
height: 70%;
max-height: 5000px;
padding-bottom: 340px;
padding-top: 180px;
margin-top: 390px;
box-sizing: border-box;
}
#expandedButton4 p{
font-size: 24px;
width: 80%;
position: fixed;
right: 10%;
bottom: 30px;
color: black;
background-color: #f2f2f2;
text-align: center;
}
#expandedButton4 h3{
background-color: #f2f2f2;
position: fixed;
top: 20px;
color: #3c96a4;
left: 170px;
font-size: 30px;
text-align: center;
}
#expandedButton3 #scroll-container {
position: fixed;
border-radius: 5px;
background-color: #f2f2f2;
bottom: 0px;
height: 450px;
width: 900px;
overflow: hidden;
right: 30px;
}
#expandedButton3 #scroll-container #scroll-text {
height: 78%;
text-align: center;
background-color: #f2f2f2;
margin-left: 0px;
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
-moz-animation: my-animation 35s linear infinite;
-webkit-animation: my-animation 35s linear infinite;
animation: my-animation 35s linear infinite;
animation-delay: 4s;
-moz-animation-delay: 4s;
-webkit-animation-delay: 4s;
}
#expandedButton #scroll-container {
position: fixed;
border-radius: 5px;
background-color: #f2f2f2;
bottom: 0px;
height: 400px;
width: 1000px;
overflow: hidden;
}
#expandedButton #scroll-container #scroll-text {
height: 107%;
width: 120%;
text-align: center;
background-color: #f2f2f2;
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
-moz-animation: my-animation 35s linear infinite;
-webkit-animation: my-animation 35s linear infinite;
animation: my-animation 35s linear infinite;
animation-delay: 4s;
-moz-animation-delay: 4s;
-webkit-animation-delay: 4s;
}
#expandedButton4 #scroll-container {
position: fixed;
border-radius: 5px;
background-color: #f2f2f2;
right: 25px;
bottom: 10px;
text-align: center;
align-items: center;
align-content: center;
display: block;
height: 400px;
width: 900px;
overflow: hidden;
}
#expandedButton4 #scroll-container #scroll-text {
height: 152%;
width: 100%;
text-align: center;
background-color: #f2f2f2;
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
-moz-animation: my-animation 35s linear infinite;
-webkit-animation: my-animation 35s linear infinite;
animation: my-animation 35s linear infinite;
animation-delay: 4s;
-moz-animation-delay: 4s;
-webkit-animation-delay: 4s;
}
#expandedButton2 #scroll-container {
position: fixed;
border-radius: 5px;
background-color: #f2f2f2;
right: 25px;
bottom: 10px;
text-align: center;
align-items: center;
align-content: center;
display: block;
height: 400px;
width: 900px;
overflow: hidden;
}
#expandedButton2 #scroll-container #scroll-text {
height: 117%;
width: 100%;
text-align: center;
background-color: #f2f2f2;
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
-moz-animation: my-animation 35s linear infinite;
-webkit-animation: my-animation 35s linear infinite;
animation: my-animation 35s linear infinite;
animation-delay: 4s;
-moz-animation-delay: 4s;
-webkit-animation-delay: 4s;
}
@-moz-keyframes my-animation {
from { -moz-transform: translateY(100%); }
to { -moz-transform: translateY(-100%); }
}
@-webkit-keyframes my-animation {
from { -webkit-transform: translateY(100%); }
to { -webkit-transform: translateY(-100%); }
}
@keyframes my-animation {
from {
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
to {
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}const sections = document.querySelectorAll('section');
const expandedButton = document.getElementById('expandedButton');
const expandedButton1 = document.getElementById('expandedButton1');
const expandedButton2 = document.getElementById('expandedButton2');
const expandedButton3 = document.getElementById('expandedButton3');
const expandedButton4 = document.getElementById('expandedButton4');
const hideExpandedSections = () => {
if (expandedButton) {
expandedButton.style.display = 'none';
}
if (expandedButton1) {
expandedButton1.style.display = 'none';
}
if (expandedButton2) {
expandedButton2.style.display = 'none';
}
if (expandedButton3) {
expandedButton3.style.display = 'none';
}
if (expandedButton4) {
expandedButton4.style.display = 'none';
}
};
document.addEventListener('click', (event) => {
const targetElement = event.target;
if (
targetElement.classList.contains('Mygtukas') ||
targetElement.classList.contains('Mygtukas1') ||
targetElement.classList.contains('Mygtukas2') ||
targetElement.classList.contains('Mygtukas3') ||
targetElement.classList.contains('Mygtukas4')
) {
hideExpandedSections();
if (targetElement.classList.contains('Mygtukas') && expandedButton) {
expandedButton.style.display = 'block';
} else if (targetElement.classList.contains('Mygtukas1') && expandedButton1) {
expandedButton1.style.display = 'block';
} else if (targetElement.classList.contains('Mygtukas2') && expandedButton2) {
expandedButton2.style.display = 'block';
}
else if (targetElement.classList.contains('Mygtukas3') && expandedButton3) {
expandedButton3.style.display = 'block';
}
else if (targetElement.classList.contains('Mygtukas4') && expandedButton4) {
expandedButton4.style.display = 'block';
}
}
});
let image = document.getElementById('image');
let images = ['./images/programmer1.jpg', './images/programmer2.jpg', './images/programmer3.jpg', './images/programmer4.jpg', './images/programmer5.jpg'];
let previousIndex = -1;
setInterval(function() {
let random;
do {
random = Math.floor(Math.random() * 5);
} while (random === previousIndex);
previousIndex = random;
image.src = images[random];
}, 2000);
function handleButtonClick(event){
const button = event.target.closest('.Mygtukas');
button.click();
}
let futureimage = document.getElementById('futureimage');
let futureimages = ['./images/future1.jpg', './images/future2.jpg', './images/future3.jpg', './images/future4.jpg', './images/future5.jpg'];
setInterval(function() {
let random;
do {
random = Math.floor(Math.random() * 5);
} while (random === previousIndex);
previousIndex = random;
futureimage.src = futureimages[random];
}, 2000);
function handleButtonClick(event){
const button = event.target.closest('.Mygtukas');
button.click();
}
let newimage = document.getElementById('newimage');
let newimages = ['./images/new1.jpg', './images/new2.jpg', './images/new3.jpg', './images/new4.jpg', './images/new5.jpg'];
setInterval(function() {
let random;
do {
random = Math.floor(Math.random() * 5);
} while (random === previousIndex);
previousIndex = random;
newimage.src = newimages[random];
}, 2000);
function handleButtonClick(event){
const button = event.target.closest('.Mygtukas');
button.click();
}
let negimage = document.getElementById('negimage');
let negimages = ['./images/neg1.jpg', './images/neg2.jpg', './images/neg3.jpg', './images/neg4.jpg', './images/neg5.jpg'];
setInterval(function() {
let random;
do {
random = Math.floor(Math.random() * 5);
} while (random === previousIndex);
previousIndex = random;
negimage.src = negimages[random];
}, 2000);
function handleButtonClick(event){
const button = event.target.closest('.Mygtukas');
button.click();
}
let posimage = document.getElementById('posimage');
let posimages = ['./images/pos1.jpg', './images/pos2.jpg', './images/pos3.jpg', './images/pos4.jpg', './images/pos5.jpg'];
setInterval(function() {
let random;
do {
random = Math.floor(Math.random() * 5);
} while (random === previousIndex);
previousIndex = random;
posimage.src = posimages[random];
}, 2000);
function handleButtonClick(event){
const button = event.target.closest('.Mygtukas');
button.click();
}我嘗試將寬度和高度更改為%，而不是更改顯示和位置。這次我真的需要幫助。謝了。
那兒有...這里發生了很多事。我建議后退幾步，看看是否有更簡單的方法來做事。
這是一個我處理6 & quot按鈕& quot利用flex和grid處理大量文本。當我設置字體大小時，我使用%和包裝元素尺寸和em:
#wrapper {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 10px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
align-content: stretch;
}
#buttons {
width: 80%;
height: 20%;
padding: 5px;
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 5px;
grid-row-gap: 5px;
border: 1px solid black;
}
.button {
font-size: 1em;
padding: 5px;
text-align: center;
border: 1px solid red;
}<div id = "wrapper">
<div id = "buttons">
<div class = "button">
Button with a lots of text, very much text a lot of text in this button
</div>
<div class = "button">
Button with a lots of text, very much text a lot of text in this button
</div>
<div class = "button">
Button with a lots of text, very much text a lot of text in this button
</div>
<div class = "button">
Button with a lots of text, very much text a lot of text in this button
</div>
<div class = "button">
Button with a lots of text, very much text a lot of text in this button
</div>
<div class = "button">
Button with a lots of text, very much text a lot of text in this button
</div>
</div>
</div>