Tag: css-grid
CSS Grid Layout ist ein W3C-Technologie, die es ermöglicht, die für die Erstellung des grids. Es entfällt die Notwendigkeit der Verwendung von Schwimmern, Tabellen, absolute Positionierung und auch flexbox (andere CSS3-Technologie) für den Bau aller Arten von Netzen, von einfach bis Komplex. Verwenden Sie dieses tag NICHT für CSS-grid-Systeme im Allgemeinen.
Elemente, die sich über alle Spalten/Zeilen mit CSS grid layout
2 Antworten
Mit dem CSS Grid Layout Module schnell Versand in Firefox und Chrome, ich dachte, ich würde versuchen in den Griff zu bekommen, wie es zu benutzen. Ich habe versucht, zu erstellen eine einfache raster mit einer Sache
Wie verwenden Sie grid-template-Bereiche, in reagieren inline-style?
4 Antworten
So, ich habe das Spiel mit css-grids im reagieren, wenn ich merkte, dass grid-template-areas hat eine etwas andere syntax, die möglicherweise nicht kompatibel inline reagieren Stile. Ich bin nicht mit jeder Bibliothek einfach nur alt reagieren inline-styles
Mauerwerk-layout mit css-raster
4 Antworten
Ich versuche zu schaffen, Mauerwerk-layout mit css grid layout. Alle Elemente im grid haben variable Höhen. Und ich weiß nicht, was posten wird. So kann ich nicht definieren grid-row für jedes Element. Ist es möglich zu Beginn
grid-template-columns funktioniert nicht
3 Antworten
Habe ich einen block display: grid. Gemäß der Idee, das erste element sollte gedehnt werden, um 2 Spalten und 2 Zeilen, die anderen besetzen einer Zelle jede. Aber die grid-template-columns - Eigenschaft funktioniert bei mir nicht, welchen
CSS-Grid - Automatische Höhe für Zeilen, Dimensionierung für Inhalte
2 Antworten
Ich habe zwei verschachtelte grids in einem grid. Leider sind die Recht verschachtelte raster .grid-3 setzt die Höhe der Zeilen, so dass sowohl die linken und rechten Gitter die gleiche Höhe, der zusätzliche Platz ist geteilt zwischen
Wie kann ich festlegen Zeilenhöhe in CSS Grid layout?
1 Antworten
Ich habe ein CSS-Grid-Layout, in dem ich das machen will, einige Mitte (3) Zeilen dehnen, um Ihre maximale Größe. Ich bin wahrscheinlich auf der Suche nach einer Immobilie ähnlich dem, was flex-grow: 1 mit Flexbox, aber ich
CSS-Grid-Verpackung?
5 Antworten
Ist es möglich, CSS-grid-wrap, ohne die Verwendung von media queries? In meinem Fall, ich habe eine nicht-deterministische Anzahl der Elemente, die ich will, platziert in einem raster, und ich möchte, dass grid zu wickeln. Mit flexbox, ich
Kraft css-grid-container zu füllen, die volle Bildschirm-Gerät
4 Antworten
Wie kann ich erzwingen, ein css-grid-container in voller Breite und Höhe des gerätebildschirms für eine single-page-app? Modifizierte Beispiel ist von Mozilla: Firefox-Dokumentation CSS: .wrapper { display: grid; border-style: solid; border-color: red; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
Ein grid-layout mit ansprechenden Plätzen
3 Antworten
Ich bin zu wollen, erstellen Sie ein grid-layout mit ansprechenden Plätzen. Ich das Gefühl, ich sollte in der Lage sein, dies zu tun mit CSS Grid layout aber Probleme beim einstellen der Höhe des Quadrats entspricht der
Größe dynamisch Spalten css grid layout mit der Maus
2 Antworten
Ich versuche, dynamisch ändern css-grid-layout-Felder durch ziehen der Spalte Teiler (oder ändern der Größe von Platzhaltern) mit der Maus. Ich resize: horizontal; auf die nav element zu ändern, und es wird geändert werden, wenn ich ziehen Sie
CSS Grid Layout funktioniert nicht im Rand-und IE 11 noch mit -ms-Präfix
3 Antworten
Verwende ich folgenden HTML-markup für mein raster. <section class="grid"> <article class="grid-item width-2x height-2x">....</article> <article class="grid-item">....</article> <article class="grid-item">....</article> <article class="grid-item width-2x">....</article> <article class="grid-item height-2x">....</article> <article class="grid-item">....</article> <article class="grid-item">....</article> <article class="grid-item width-2x height-2x">....</article> </section> Den SCSS-code ist so etwas
Flex-items haben die gleiche Breite in einer Zeile
3 Antworten
Wenn Sie sich das Beispiel unten möchte ich die Kopfzeilen (h4.child-title) gleiche Länge haben innerhalb des übergeordneten Containers. Aber ich bin mir nicht gelungen, dieses Ziel zu erreichen. Jede Hilfe ist willkommen. CSS: .top-level { display: flex;
Wie die maximale Breite einer Spalte im CSS Grid Layout?
2 Antworten
, Was ich erreichen will: Mit CSS Grid Layout, um eine Seite mit einer rechten Spalte, die Größe ist abgeleitet von seinem Inhalt, aber nur bis zu 20% der Fensterbreite. , Wie ich dachte, dass es funktionieren
Steuern der Größe von einem Bild in einem CSS-Grid-layout
3 Antworten
Ich habe ein CSS-grid-layout mit einer Reihe von Bereichen und eine Foto-container. Ich weiß nicht, wie: Steuern die Größe der Fotos, so dass es enthalten ist, im Bereich des grid - halten Sie die Breite des Fotos
Mitte und unten-Ausrichtung der flex-Elemente
0 Antworten
Ich habe ein flex-container (das Blaue Quadrat) mit den folgenden Eigenschaften: display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; Daher, Ihre Kinder (hellblaue Quadrate) ordnen sich-wie Sie unten sehen. Aber ich möchte noch hinzufügen, dass ein anderes
Verhindern, dass Inhalte von der Erweiterung der grid-Elemente
2 Antworten
TL;DR: gibt es etwas wie table-layout: fixed für CSS-grids? Ich habe versucht, zu erstellen eine Jahres-Ansicht-Kalender mit einem großen 4x3-raster für die Monate und die darin verschachtelten 7x6 raster für die Tage. Der Kalender füllt die Seite,
Gleich Breite Spalten CSS Grid
4 Antworten
Ich würde gerne das html unten zeigen, sind in n Spalten gleich, ob es zwei, oder drei, oder mehr Kind-Elemente, um die row-element mithilfe von css-grid, Flexbox, macht dieses einfach, aber ich kann nicht get it done
Gibt es CSS-Grid-highlighting im Chrome Developer Tools?
2 Antworten
In der Entwickler-tools von Firefox, ist es möglich, finden Sie die CSS-raster, und auch sehen, wenn es nicht aktiviert ist. Ist es möglich ein CSS-Raster in die developer tools von Chrome, auch wenn das raster nicht aktiviert
Erstellen Sie eine Tabelle mit CSS grid
1 Antworten
Ich versuche eine Tabelle erstellen, die mit CSS-raster mit gleich-Spalten basierend auf den Inhalt. Ich möchte vermeiden, mit <table>. Dies ist ein follow-up zu dieser Frage: Auto-anpassen der Spalten mit CSS grid Was ich versuche zu erreichen:
CSS-only-Mauerwerk-layout
0 Antworten
Brauche ich zur Umsetzung ein ziemlich run-off-the-mill-Mauerwerk-layout. Jedoch, für eine Reihe von Gründen, ich will nicht, JavaScript zu verwenden, um es zu tun. Parameter: Alle Elemente haben die gleiche Breite Elemente haben eine Höhe, die nicht berechnet
CSS-Grid: Ist es möglich, Farbe, raster Lücken?
3 Antworten
Ist es ein Weg, um style mehr als nur die Breite des Gitters Lücken innerhalb der CSS grid layout-Modul? Ich kann nicht finden, etwas über Sie in der Dokumentation, aber man würde dazu neigen zu denken, dass
Responsive Bildergalerie mit CSS flexbox-oder grid-layout
2 Antworten
Arbeite ich an einem Bild-Galerie-Widget, wo der Benutzer kann eine thumbnail-Breite, thumbnail-Höhe und-Marge (zwischen den thumbnails) und das widget werden alle Bild-thumnails in einem schönen Gitter, wo jedes Bild hat die gleiche Breite und Höhe. Ich Frage
Höhe der Zeilen in der CSS Grid Layout
3 Antworten
Entnehme ich, dass dies unmöglich ist zu erreichen mit Flexbox, als jede Zeile kann nur die minimal erforderliche Höhe, um seine Elemente, aber kann das erreicht werden mit den neueren CSS-Grid? Klar zu sein, möchte ich gleich
Verhindern, dass Inhalte Gitterelemente erweitern
1 Antworten
TL;DR: gibt es etwas wie table-layout: fixed für CSS-grids? Ich habe versucht, zu erstellen eine Jahres-Ansicht-Kalender mit einem großen 4x3-raster für die Monate und die darin verschachtelten 7x6 raster für die Tage. Der Kalender füllt die Seite,