Grid Gap CSS
In diesem Tutorial werden wir diese Eigenschaft „Grid-Lack“ in CSS verwenden und Ihnen das Konzept „Grid-Lap“ zusammen mit verschiedenen Beispielen im Detail erklären.
Beispiel 1:
Wir beginnen mit unserem ersten Beispiel, indem wir eine neue Datei in der Software, Visual Studio Code, erstellen. Wenn wir eine neue Datei im Visual Studio -Code erstellen, können wir die Sprache auswählen und HTML auswählen. Der HTML -Code muss dann erstellt werden. Mit Visual Studio -Code können wir die grundlegenden Tags sofort durch Eingabe erwerben!Und dann klicken Sie auf "eingeben.„Also nutzen wir diese Fähigkeit und sammeln alle diese grundlegenden Tags. Im HTML -Kopf -Tag bieten wir einen Link zur CSS -Datei an. Wir werden eine Überschrift erstellen und dann einen Absatz unter diese Überschrift setzen. Dann erstellen wir eine Hauptdiv-Klasse mit dem Namen „Grid-Container“ und setzen sieben weitere Div-Klassen in dieser Hauptdiv. Wir geben allen Divs unterschiedliche Namen wie „Punkt1“ für Div -Klasse 1, „Item2“ für Div -Klasse 2 usw. und so weiter.
Wir verwenden die Eigenschaft "Text-Align" für die "Körper" und richten sie auf das "Zentrum" aus. Dann wählen wir "grün" als "Farbe" des Übergangs und setzen auch die „Unterstreichung“ für die Eigenschaft "Textdekoration" ein. Die Familie der Schrift ist "algerisch". Der Absatz "Schriftfamilie" ist "Times New Roman". Das "Schriftgewicht" ist "fett" und "Maroon" die "Farbe". Das "Schriftgröße", das wir hier setzen.
Jetzt werden wir das Hauptdiv mit dem Namen "Grid-Container" festlegen. Dafür ist das "Display", das wir verwenden, das "Raster". Dann haben wir die Eigenschaft „Grid-Template-Säule“, die zum Angeben der Anzahl der Spalten in einem Raster verwendet wird. Wir setzen „Auto Auto Auto Auto“ als Wert dieser Eigenschaft ein, was bedeutet, dass die Größe der Spalte gemäß der Größe des Containers festgelegt wird. Hier haben wir drei Spalten in diesem Netzlayout.
Jetzt setzen wir die "Grid-Säulen-Lücke" und "Raster-Row-Lücke" separat. Die "Grid-Säulen-Lücke", die wir einstellen, ist "40px" und die "Grid-Row-Lücke" ist "20px". Die „Hintergrundfarbe“ des Haupt-Div-Containers ist „orange“ und die hier verwenden, die wir hier verwenden, lautet "10px". Diese Padding -Eigenschaft wird verwendet, um den Raum um den Inhalt zu generieren.
Jetzt werden wir das „Div“ des „Gitters“ festlegen. Container “, der alle Divs darstellt, die im Hauptdiv vorhanden sind. Wir setzen die „Hintergrundfarbe“ der Divs auf „weiß“ und den in diesen geschriebenen Text sind im „Zentrum“ ausgerichtet. Nach all dem haben wir die Eigenschaft „Polsterung“, in der wir die obere und untere Polsterung auf "20px" einstellen, und die linke, rechte Polsterung ist "0". Die Größe der in diesen Divs geschriebenen Schriftart ist auf „30px“ eingestellt. Schauen Sie sich nun den Ausgabebuchscreenshot unter diesem Code an.
Hier ist der Spalt oder der Raum zwischen den Zeilen "20px" und der Raum zwischen den Spalten "40px" im angegebenen Screenshot.
Beispiel # 2:
In diesem Beispiel haben wir acht Divs im Hauptdiv „Grid-Container“. Wir werden die Eigenschaft „Grid-Lack“ auf diesen Code anwenden, das die Kurzeigenschaft auf "Grid-Säulen-Lack" und "Grid-Row-Lack" ist. Wir setzen sowohl die Spaltelücke als auch die Zeilenlücke in dieser einen „Grid-Lack“ -Mobilie ein.
Wir verwenden die "Farbe" der Überschrift als "orange" und "Textdekoration" wird hier festgelegt, um "zu unterstreichen". Auch die "Schriftfamilie" ist "algerisch". Anschließend setzen wir das "Raster" für die Eigenschaft "Anzeige" und in der "Grid-Template-Säule" verwenden wir vier "Auto", damit wir vier Spalten in der Ausgabe erhalten.
Danach haben wir die Eigenschaft „Grid-Lack“, in der wir die Größe des Raums in „%“ für die Spalten und Zeilen des Gitters festlegen. Wir setzen es auf „5%“, so dass es zwischen den Spalten und „5%“ zwischen den Zeilen einen Platz von „5%“ erzeugt. Wir nutzen die „Hintergrundfarbe“ zum „Light-Slate-Grey“ und die „Polsterung“ ist „10px“ für dieses „Netz. Ontainer “. Wir wenden die „Hintergrundfarbe“ auf die anderen Divs in „RGBA (122, 240, 122, 0) an.8), das „hellgrün“ ist, und wir haben auch eine „0.8 ”Alpha -Wert, daher zeigt er etwas Transparenz.
Wir richten den Text in "Mitte" aus und die "Polsterung" für die "Oberseite" und "unten" ist "20px" und "0" ist für die "linke" und "rechte" Polsterung. Die "Schriftgröße" ist in diesem Code "30px".
In dem angegebenen Screenshot gibt es vier Spalten und der Raum zwischen den Zeilen und Spalten beträgt „5%“, da wir dies in der Eigenschaft „Grid-Gap“ festgelegt haben.
Beispiel # 3:
Hier haben wir in diesem Beispiel zwölf Divs und wir werden die Eigenschaft „Grid-Lack“ auf diese anwenden. Außerdem werden wir den Wert dieser Eigenschaft „Grid-Lack“ in „PX“ im CSS-Code festlegen.
Für den "Körper" verwenden wir das Attribut "Text-Align" und beheben es in "Zentrum". Das "Schriftart" ist "kursiv". Anschließend fügen wir den Wert "Grid" für die Eigenschaft "Anzeige" hinzu. Wir verwenden vier "Auto" in der Eigenschaft "Grid-Template-Säule", um vier Spalten in der Ausgabe zu erhalten. Danach haben wir die Eigenschaft „Grid-Lack“, mit der wir die Größe des Raums in „Pixel“ für die Spalten und Zeilen des Gitters angeben können. Wir setzen es auf "50px", was bedeutet. Die "Hintergrundfarbe" ist auf "Pink" eingestellt. Außerdem erstellen wir eine „Grenze“ für diese Hauptdiv, die auf „1PX Solid Black“ eingestellt ist.
Hier haben wir "10px" der "Polsterung". Jetzt setzen wir die „Hintergrundfarbe“ der inneren Divs im „RGBA“ -Format und setzen es auf „RGBA (204, 90, 90, 0).8) “, der Transparenz für diese Farbe zeigt. Der Transparenzwert hier lautet „0.8 ”. Die "Polsterung", die "Schriftgröße" und die "Schriftfamilie" sind die gleichen wie in den obigen Beispielen.
Dies zeigt, dass wir vier Spalten in der Ausgabe haben und auch der Raum zwischen den Zeilen des Gitters und die Spalten des Netzes ist hier „50px“.
Abschluss
Das Ziel dieses Tutorials ist es, Ihnen zu helfen, zu verstehen. In diesem Tutorial haben wir uns die CSS-Eigenschaft „Grid-Lack“ angesehen und beschrieben, was die Eigenschaft „Grip-Lack“ bedeutet, warum wir diese Eigenschaft verwenden, wie sie diese verwenden und wie sie die Ausgabe zurückgibt. Die Verwendung des „Gitter-Lückes“ wurde hier bereits besprochen. Wir haben diese Eigenschaft erklärt, die wir verwendet haben, um die Platzgröße zwischen den Zeilen und Spalten des Netzes festzulegen. Wir haben auch Beispiele für die Verwendung der Eigenschaft „Grid-Gap“ sowie die Ergebnisse aller Beispiele in diesem Tutorial gezeigt.