Bootsrap'e yeni başladım yardım

30-07-2023, 02:50:53

merhaba arkadaşlar bir grid sistem yapmak istiyorum ama saatlerdir uğraşıyorum bir türlü yapamadım, fikir verebilecek birisi var mıdır ?
yapmaya çalıştığım sistem aşağıdaki gibi.

30-07-2023, 02:57:44

#2

Carlos1

Bu kod size yardımcı olacaktır.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>carlos.1gridtest</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
      padding: 20px;
    }

    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 20px;
    }

    .grid-item {
      width: 150px;
      height: 100px;
      background-color: #e4f1fe;
      border: 1px solid #ccc;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      font-weight: bold;
      color: #333;
      text-transform: uppercase;
    }

    .grid-item.vertical {
      writing-mode: vertical-lr;
      text-orientation: mixed;
    }

    .grid-item.large {
      width: 300px;
      height: 200px;
    }
    .grid-item.small {
      width: 100px;
      height: 80px;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">150x100</div>
    <div class="grid-item">150x100</div>
    <div class="grid-item">150x100</div>
    <div class="grid-item vertical">100x150</div>
    <div class="grid-item large">300x200</div>
    <div class="grid-item small">100x80</div>
    <div class="grid-item">150x100</div>
    <div class="grid-item vertical">100x150</div>
    <div class="grid-item">150x100</div>
    <div class="grid-item">150x100</div>
    <div class="grid-item small">100x80</div>
  </div>
</body>
</html>

30-07-2023, 03:08:14

#3

Hasanssk

emeğinize sağlık teşekkür ederim. fakat bu şekilde bir çıktı aldım bir yerde hata mı yapıyorum.

30-07-2023, 03:17:58

#4

DenqeSiz

Hocam size bootstrap html css öğretecek liste

https://www.r10.net/e-book/3535126-5...ogramlama.html

not olarak bırakıyorum fiyat gayet uygundur

30-07-2023, 03:25:14

#5

hk1337

Gold üye

Merhaba, size mantığını bu şekilde özetleyebilirim. İkinci satırda yatay ve dikey divlerin yan yana gelmesi kafanızı karıştırmış olabilir. Aslında orası iki ayrı sütun. İç içe row kullanılmış.

col-10 sınıflı divin içerisine de yeniden bir row yapısı kurup col-4 col-4 col-4 gibi iç sütunlara ayırmalısınız.

30-07-2023, 03:31:50

#6

Hasanssk

Evet doğru ben ikisini tek div olarak düşündüm bir an çok teşekkürler

30-07-2023, 03:56:14

#7

hk1337

Gold üye

Hasanssk adlı üyeden alıntı: mesajı görüntüle

Evet doğru ben ikisini tek div olarak düşündüm bir an çok teşekkürler

Rica ederim.

30-07-2023, 06:20:00

#8

~~sagirr~~

Üyeliği durduruldu

Carlos1 adlı üyeden alıntı: mesajı görüntüle

Bu kod size yardımcı olacaktır.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>carlos.1gridtest</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
      padding: 20px;
    }

    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 20px;
    }

    .grid-item {
      width: 150px;
      height: 100px;
      background-color: #e4f1fe;
      border: 1px solid #ccc;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      font-weight: bold;
      color: #333;
      text-transform: uppercase;
    }

    .grid-item.vertical {
      writing-mode: vertical-lr;
      text-orientation: mixed;
    }

    .grid-item.large {
      width: 300px;
      height: 200px;
    }
    .grid-item.small {
      width: 100px;
      height: 80px;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">150x100</div>
    <div class="grid-item">150x100</div>
    <div class="grid-item">150x100</div>
    <div class="grid-item vertical">100x150</div>
    <div class="grid-item large">300x200</div>
    <div class="grid-item small">100x80</div>
    <div class="grid-item">150x100</div>
    <div class="grid-item vertical">100x150</div>
    <div class="grid-item">150x100</div>
    <div class="grid-item">150x100</div>
    <div class="grid-item small">100x80</div>
  </div>
</body>
</html>

boodstrap dedi dostum