მთავარ შინაარსზე გადასვლა
LibraTool logoLibraTool

CSS Grid შემქმნელი უფასოდ

ვიზუალურად დაამუშავეთ CSS grid — ტრეკები, ერთეულები და უფსები — და დააკოპიეთ გენერირებული CSS და HTML.

მუშაობს ოფლაინ ჩატვირთვის შემდეგ
წინასწარი დაყენებები
სვეტები (3)
რიგები (2)
ცოცხლი გადახედვა
1
2
3
4
5
6
css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 16px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

🔒 ყველაფერი გაშვებულია თქვენს ბრაუზერში — არაფერი ატვირთულია.

როგორ მუშაობს

ვიზუალურად დააპროექტეთ CSS ბადე: დაამატეთ 8 სვეტამდე და 8 მწკრივამდე, დააყენეთ თითოეული ტრეკი fr, px, auto ან min/max-content-ზე, და დაარეგულირეთ მწკრივის/სვეტის ხარვეზები. დანომრილი, ცოცხალი გადახედვა მყისვე განახლდება, და გენერირებული grid-template CSS, პლუს შესატყვისი HTML, ერთი დაწკაპუნებით არის თქვენს ბუფერში.

  1. 1
    დააპროექტეთ ბადე
    დაამატეთ/ამოშალეთ სვეტები და მწკრივები + და − ღილაკებით.
  2. 2
    დააყენეთ ტრეკები
    თითოეულ სვეტსა და მწკრივს საკუთარი ერთეული აქვს (1fr, 100px, auto…).
  3. 3
    დაარეგულირეთ ხარვეზები
    ცალკეული row-gap და column-gap სლაიდერები.
  4. 4
    დააკოპირეთ კოდი
    პროდაქშენ-მზა CSS და შესატყვისი HTML ჩონჩხი.

ყველაფერი თქვენს ბრაუზერში მუშაობს — არაფერი იტვირთება.

დაკავშირებული ინსტრუმენტები

↔️

CSS Flexbox შემქმნელი

აკეთეთ ექსპერიმენტი flex მიმართულებით, მოტეხვით, justify და align ცოცხლი ელემენტებით — და დააკოპიეთ CSS.

სცადე
📐

CSS clamp() გენერატორი

გენერირება გაუკეთეთ მოქნილ CSS clamp() მნიშვნელობას responsive ტიპოგრაფიისა და დაშორებისთვის. დააყენეთ მინ/მაქს ზომა და viewport დიაპაზონი, ნახეთ პირდაპირი გადახედვა და დააკოპირეთ ერთი სტრიქონის CSS.

სცადე
📓

დასაბეჭდი ქაღალდი — ხაზებიანი, უჯრებიანი, წერტილოვანი და ნოტების ქაღალდი (PDF)

დაბეჭდეთ საკუთარი ქაღალდი: ხაზებიანი (ფართო ან კოლეჯის), უჯრებიანი, წერტილოვანი, იზომეტრიული, ხელწერის სავარჯიშო, ნოტის სტანი ან Cornell ჩანაწერები; A4, Letter, A5 ან Legal ზომით, ნებისმიერი ხაზის ფერით, იმდენი გვერდით, რამდენიც გჭირდებათ. მკაფიო ვექტორული PDF, შექმნილი თქვენს ბრაუზერში.

სცადე

ხშირად დასმული კითხვები