مولّد CSS Grid
أداة مجانية لتوليد CSS Grid. محرر مرئي للصفوف والأعمدة والفجوات مع توليد تلقائي للكود. نسخ الكود. معالجة في المتصفح.
منشئ CSS Grid أداة مجانية على الإنترنت تصمّم تخطيطات الشبكة بصرياً. اضبط الصفوف والأعمدة والفجوات ووضع الخلايا بالسحب، مع توليد تلقائي لكود CSS Grid. تشمل معاينة فورية. تتم المعالجة في المتصفح دون رفع إلى خادم، ومجاني تماماً لتصميم تخطيطات الويب.
1
2
3
4
5
6
7
8
9
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
justify-items: stretch;
align-items: stretch;
}
كود HTML
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
lock لا يتم إرسال الملفات إلى أي خادم