Erstellen eines Trello -Layouts mit CSS Grid und Flexbox

Key Takeaways

• Das Tutorial zeigt, wie ein grundlegendes Layout einer Trello-Platine mit CSS Grid und Flexbox implementiert wird und eine reaktionsschnelle CSS-Lösung bietet. Das Layout besteht aus einer App -Leiste, einer Boardleiste und einem Abschnitt mit Kartenlisten.
• In dem Tutorial wird erläutert, wie ein 3 × 1 -Raster verwendet wird, um die Layoutstruktur zu erstellen, wobei die ersten beiden Reihen feste Höhen und die dritte Reihe über den Rest der verfügbaren Ansichtsfensterhöhe überspannen. Es verwendet auch Ansichtsfenster, um sicherzustellen, dass der Container immer so groß ist wie das Ansichtsfenster des Browsers.
• Das Tutorial zeigt, wie ein Einzelzeilen-Zeilencontainer mit Ansichtsfenster verwendet wird, um die Kartenlisten zu formatieren. Es zeigt auch, wie Sie die Überlauf-X-Eigenschaft verwenden, um eine horizontale Bildlaufleiste am unteren Bildschirmrand anzuzeigen, wenn die Listen nicht in die Breite des Ansichtsfensters passen.
• Das Tutorial legt nahe, dass die maximale Einschränkung auf die innere, ungeordnete Liste angewendet wird, um die Höhe einer Liste zu verwalten. Es wird auch erläutert, wie die Liste so groß wie der übergeordnete Container und die Verwendung der Überlaufeigenschaft, um die Karten-Scrollbar nur bei Bedarf anzuzeigen.

In diesem Tutorial werde ich Sie durch eine Implementierung des grundlegenden Layouts eines Trello -Board -Bildschirms führen (siehe Beispiel hier). Dies ist eine reaktionsschnelle CSS-Lösung, und nur die strukturellen Merkmale des Layouts werden entwickelt.

Für eine Vorschau ist hier eine Codepen -Demo des Endergebnisses.

Neben dem Gitterlayout und Flexbox verwendet die Lösung Berechnungs- und Ansichtsfenstereinheiten. Um den Code lesbarer und effizienter zu gestalten, nutze ich auch SASS -Variablen.

Es werden keine Fallbacks bereitgestellt. Stellen Sie also sicher, dass der Code in einem unterstützenden Browser ausgeführt wird. Lassen Sie uns ohne weiteres eintauchen und die Bildschirmkomponenten nacheinander entwickeln.

Das Bildschirmlayout

Der Bildschirm eines Trello -Boards besteht aus einer App -Leiste, einer Board -Leiste und einem Abschnitt mit den Kartenlisten. Ich baue diese Struktur mit dem folgenden Markup -Skelett:

<span><span><span><div</span> class<span>="ui"</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar app"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar board"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><div</span> class<span>="lists"</span>></span>
</span>    <span><span><span><div</span> class<span>="list"</span>></span>
</span>      <span><span><span><header</span>></span>...<span><span></header</span>></span>
</span>      <span><span><span><ul</span>></span>
</span>        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>        ...
        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>      <span><span><span></ul</span>></span>
</span>      <span><span><span><footer</span>></span>...<span><span></footer</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Dieses Layout wird mit einem CSS -Netz erreicht. Insbesondere ein 3 × 1 -Gitter (dh eine Säule und drei Zeilen). Die erste Zeile ist für die App -Leiste, die zweite für die Boardleiste und die dritte für das .lists -Element.

Die ersten beiden Zeilen haben jeweils eine feste Höhe, während die dritte Reihe den Rest der verfügbaren Ansichtsfensterhöhe umfasst:

<span>.ui {
</span><span>  <span>height: 100vh;</span>
</span><span>  <span>display: grid;</span>
</span><span>  <span>grid-template-rows: $appbar-height $navbar-height 1fr;</span>
</span><span>}</span>

Ansichtsfenster stellen sicher, dass der .Ui -Container immer so groß ist wie das Ansichtsfenster des Browsers.

Dem Container wird

Ein Gitterformat -Kontext zugeordnet, und die oben angegebenen Rasterreihen und Spalten sind definiert. Um genauer zu sein, werden nur die Zeilen definiert, da die eindeutige Spalte nicht deklariert werden muss. Die Größe der Zeilen erfolgt mit ein paar SASS -Variablen für die Höhe der Balken und der FR -Einheit, damit die Höhe des .listen -Elements den Rest der verfügbaren Ansichtsfensterhöhe erstrecken.

Die Karte listet Abschnitt

auf

Wie bereits erwähnt, veranstaltet die dritte Zeile des Bildschirmgitters den Container für die Kartenlisten. Hier ist der Umriss seines Markups:

<span><span><span><div</span> class<span>="ui"</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar app"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar board"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><div</span> class<span>="lists"</span>></span>
</span>    <span><span><span><div</span> class<span>="list"</span>></span>
</span>      <span><span><span><header</span>></span>...<span><span></header</span>></span>
</span>      <span><span><span><ul</span>></span>
</span>        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>        ...
        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>      <span><span><span></ul</span>></span>
</span>      <span><span><span><footer</span>></span>...<span><span></footer</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Ich verwende einen Einzelzeilen-Zeilencontainer mit Ansichtsfenster, um die Listen zu formatieren:

<span>.ui {
</span><span>  <span>height: 100vh;</span>
</span><span>  <span>display: grid;</span>
</span><span>  <span>grid-template-rows: $appbar-height $navbar-height 1fr;</span>
</span><span>}</span>

Zuweisen des automatischen Werts der Überlauf-X-Eigenschaft, dass der Browser eine horizontale Bildlaufleiste am unteren Rand des Bildschirms anzeigen soll, wenn die Listen nicht in die vom Ansichtsfenster bereitgestellte Breite passen.

Die Flex -Shorthand -Eigenschaft wird für die Flex -Elemente verwendet, um die Listen starr zu erstellen. Der Autowert für die Flex-Base (in der Shorthand verwendet) weist die Layout-Engine an, die Größe der Breite des .list-Elements zu lesen, und die Nullwerte für Flex-Flex- und Flex-Shrink verhindern die Änderung dieser Breite.

Als nächstes muss ich eine horizontale Trennung zwischen den Listen hinzufügen. Wenn ein rechter Vorsprung auf den Listen festgelegt ist, wird der Rand nach der letzten Liste in einem Board mit horizontalem Überlauf nicht gerendert. Um dies zu beheben, werden die Listen durch einen linken Rand getrennt, und der Speicherplatz zwischen der letzten und dem richtigen Ansichtsfenster wird durch Hinzufügen von :: nach Pseudo-Element zu jedem .Listen-Element behandelt. Der Standard-Flex-Shrink: 1 muss überschrieben werden. Andernfalls „absorbiert“ der Pseudoelement den gesamten negativen Raum und es verschwindet.

Beachten Sie, dass auf Firefox

Die Kartenliste

Jede Kartenliste besteht aus einer Header -Bar, einer Kartenabfolge und einer Fußzeile. Das folgende HTML -Snippet erfasst diese Struktur:

<span><span><span><div</span> class<span>="lists"</span>></span>
</span>  <span><span><span><div</span> class<span>="list"</span>></span>
</span>    ...
  <span><span><span></div</span>></span>
</span>  ...
  <span><span><span><div</span> class<span>="list"</span>></span>
</span>    ...
  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Die entscheidende Aufgabe hier ist, wie Sie die Höhe einer Liste verwalten. Die Kopfzeile und die Fußzeile haben feste Höhen (nicht unbedingt gleich). Dann gibt es eine variable Anzahl von Karten, jeweils eine variable Menge an Inhalten. Die Liste wächst und schrumpft vertikal, wenn Karten hinzugefügt oder entfernt werden.

Aber die Höhe kann nicht auf unbestimmte Zeit wachsen, sie muss eine Obergrenze haben, die von der Höhe des .listen -Elements abhängt. Sobald diese Grenze erreicht ist, möchte ich, dass eine vertikale Bildlaufleiste anscheinend Zugriff auf die Karten ermöglicht, die die Liste überlaufen.

Dies klingt nach einem Job für die Eigenschaften der Maxi- und Überlauf. Wenn diese Eigenschaften jedoch auf den Stammcontainer angewendet werden. List, dann wird die Bildlaufleiste für alle Elemente, Header und Fußzeile enthalten, sobald die Liste ihre maximale Höhe erreicht ist. Die folgende Abbildung zeigt die falsche Seitenleiste links und die richtige rechts:

Wenden wir stattdessen die Einschränkung der Max-Höhe auf die innere

an. Welcher Wert sollte verwendet werden? Die Höhen des Headers und der Fußzeile müssen von der Höhe des List -übergeordneten Containers (.Listen) abgezogen werden:

<span><span><span><div</span> class<span>="ui"</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar app"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar board"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><div</span> class<span>="lists"</span>></span>
</span>    <span><span><span><div</span> class<span>="list"</span>></span>
</span>      <span><span><span><header</span>></span>...<span><span></header</span>></span>
</span>      <span><span><span><ul</span>></span>
</span>        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>        ...
        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>      <span><span><span></ul</span>></span>
</span>      <span><span><span><footer</span>></span>...<span><span></footer</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Aber es gibt ein Problem. Der prozentuale Wert bezieht sich nicht auf .Listen, sondern auf das übergeordnete Element des

Elements, und dieses Element hat keine bestimmte Höhe und daher kann dieser Prozentsatz nicht behoben werden. Dies kann behoben werden, indem .List so groß wie .listen:

<span>.ui {
</span><span>  <span>height: 100vh;</span>
</span><span>  <span>display: grid;</span>
</span><span>  <span>grid-template-rows: $appbar-height $navbar-height 1fr;</span>
</span><span>}</span>

Auf diese Weise, da .Liste immer so hoch ist wie .Listen, unabhängig von ihrem Inhalt, kann die Eigenschaft im Hintergrund nicht für die Listen-Hintergrundfarbe verwendet werden, aber es ist möglich, ihre Kinder zu verwenden (Header, Fußzeile, Karten ) für diesen Zweck.

Eine letzte Anpassung an die Höhe der Liste ist erforderlich, um ein bisschen Platz ($ GAP) zwischen der unteren und unteren Rand des Ansichtsfensters zu berücksichtigen:

<span><span><span><div</span> class<span>="lists"</span>></span>
</span>  <span><span><span><div</span> class<span>="list"</span>></span>
</span>    ...
  <span><span><span></div</span>></span>
</span>  ...
  <span><span><span><div</span> class<span>="list"</span>></span>
</span>    ...
  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Eine weitere $ Scrollbar-Dickness-Menge wird abgezogen, um zu verhindern, dass die Liste die horizontale Bildlaufleiste des .list-Elements berührt. Tatsächlich wächst diese Bildlaufleiste auf Chrom in der .lists -Box. Das heißt, der 100% -Werwert bezieht

auf Firefox stattdessen ist die Bildlaufleiste außerhalb der Höhe der .listen „angehängt“, d. H. Der 100% bezieht sich auf die Höhe von .listen, die nicht die Bildlaufleiste enthalten. Diese Subtraktion wäre also nicht notwendig. Wenn die Bildlaufleiste sichtbar ist, ist der visuelle Raum zwischen dem unteren Rand einer Liste, die seine maximale Höhe erreicht hat, und die Oberseite der Bildlaufleiste etwas größer.

.

Hier sind die relevanten CSS -Regeln für diese Komponente:

<span>.lists {
</span><span>  <span>display: flex;</span>
</span><span>  <span>overflow-x: auto;</span>
</span>  <span>> * {
</span><span>    <span>flex: 0 0 auto; // 'rigid' lists</span>
</span><span>    <span>margin-left: $gap;</span>
</span>  <span>}
</span><span>  <span>&::after {</span>
</span><span>    <span>content: '';</span>
</span><span>    <span>flex: 0 0 $gap;</span>
</span>  <span>}
</span><span>}</span>

Wie bereits erwähnt, wird die Listen-Hintergrundfarbe durch Zuweisen des Werts von $ list-bg-color der Hintergrund-Color-Eigenschaft der Kinder des einzelnen Elements gerendert. Überlauf-y zeigt die Karten-Scrollbar nur bei Bedarf. Schließlich wird dem Header und der Fußzeile ein einfaches Styling hinzugefügt.

Schliff

beenden

Die HTML für eine einzige Karte besteht einfach aus einem Listenelement:

<span><span><span><div</span> class<span>="list"</span>></span>
</span>  <span><span><span><header</span>></span>List header<span><span></header</span>></span>
</span>  <span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>    ...
    <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span>  <span><span><span><footer</span>></span>Add a card...<span><span></footer</span>></span>
</span><span><span><span></div</span>></span></span>

oder, wenn die Karte ein Titelbild hat:

<span>ul {
</span><span>  <span>max-height: calc(100% - #{$list-header-height} - #{$list-footer-height});</span>
</span><span>}</span>

Dies ist das relevante CSS:

<span><span>.list</span> {
</span>  <span>height: 100%;
</span><span>}</span>

Nachdem ein Hintergrund, eine Polsterung und die unteren Ränder festgelegt wurden, ist das Cover -Bildlayout fertig. Die Bildbreite muss die gesamte Karte von der linken Polsterkante bis zur rechten Polsterkante überspannen:

<span>.list {
</span><span>  <span>height: calc(100% - #{$gap} - #{$scrollbar-thickness});</span>
</span><span>}</span>

Dann werden negative Ränder zugewiesen, um das Bild horizontal und vertikal auszurichten:

<span>.list {
</span><span>  <span>width: $list-width;</span>
</span><span>  <span>height: calc(100% - #{$gap} - #{$scrollbar-thickness});</span>
</span>
  <span>> * {
</span><span>    <span>background-color: $list-bg-color;</span>
</span><span>    <span>color: #333;</span>
</span><span>    <span>padding: 0 $gap;</span>
</span>  <span>}
</span>
  <span>header {
</span><span>    <span>line-height: $list-header-height;</span>
</span><span>    <span>font-size: 16px;</span>
</span><span>    <span>font-weight: bold;</span>
</span><span>    <span>border-top-left-radius: $list-border-radius;</span>
</span><span>    <span>border-top-right-radius: $list-border-radius;</span>
</span>  <span>}
</span>
  <span>footer {
</span><span>    <span>line-height: $list-footer-height;</span>
</span><span>    <span>border-bottom-left-radius: $list-border-radius;</span>
</span><span>    <span>border-bottom-right-radius: $list-border-radius;</span>
</span><span>    <span>color: #888;</span>
</span>  <span>}
</span>
  <span>ul {
</span><span>    <span>list-style: none;</span>
</span><span>    <span>margin: 0;</span>
</span><span>    <span>max-height: calc(100% - #{$list-header-height} - #{$list-footer-height});</span>
</span><span>    <span>overflow-y: auto;</span>
</span>  <span>}
</span><span>}</span>

Der dritte positive Margenwert kümmert sich um den Speicherplatz zwischen dem Titelbild und dem Kartentext.

Schließlich habe ich den beiden Balken einen Flex -Formatierungskontext hinzugefügt, der die ersten Reihen des Bildschirmlayouts einnimmt. Aber sie werden nur skizziert. Fühlen Sie sich frei, Ihre eigene Umsetzung zu erstellen, indem Sie die Demo erweitern.

Schlussfolgerung

Dies ist nur eine mögliche Möglichkeit, dieses Design zu erreichen, und es wäre interessant, andere Ansätze zu sehen. Außerdem wäre es schön, das Layout abzuschließen, zum Beispiel die beiden Bildschirmstangen.

Eine weitere potenzielle Verbesserung könnte die Implementierung von benutzerdefinierten Scrollbars für die Kartenlisten sein.

Fühlen Sie sich also frei, die Demo zu geben und einen Link in der folgenden Diskussion zu veröffentlichen.

Häufig gestellte Fragen (FAQs) zum Erstellen eines Trello -Layouts mit CSS Grid und Flexbox

Wie kann ich ein trelloähnliches Layout mit CSS-Gitter und Flexbox erstellen? Zunächst müssen Sie eine grundlegende HTML -Struktur für Ihr Layout erstellen. Dies beinhaltet das Erstellen eines Containers für Ihr Board und einzelne Container für Ihre Listen und Karten. Als nächstes wenden Sie CSS -Gitter auf den Board Container an, um ein Netzlayout zu erstellen. Sie können dann Flexbox verwenden, um Ihre Listen und Karten in ihren jeweiligen Containern zu ordnen. Auf diese Weise können Sie ein reaktionsschnelles, flexibles Layout erstellen, mit dem eine beliebige Anzahl von Listen und Karten gerecht werden kann. CSS Grid und Flexbox bieten mehrere Vorteile für die Erstellung eines trelloähnlichen Layouts. Sie ermöglichen es Ihnen, ein reaktionsschnelles Layout zu erstellen, das sich an verschiedene Bildschirmgrößen und -orientierungen anpassen kann. Sie bieten auch ein flexibles Layout -System, mit dem eine beliebige Anzahl von Listen und Karten gerecht werden kann. Darüber hinaus bieten sie leistungsstarke Ausrichtungs- und Verteilungssteuerung und erleichtern es einfach, ein sauberes, organisiertes Layout zu erstellen. Gitter und Flexbox sind vielseitige Layoutsysteme, mit denen eine Vielzahl von Layouts erstellt werden kann. Sie können einzeln oder in Kombination verwendet werden, um komplexe, reaktionsschnelle Layouts zu erzeugen. Egal, ob Sie ein einfaches zweispaliges Layout oder ein komplexes Netzlayout erstellen, CSS-Raster und Flexbox können die benötigten Tools liefern.

Machen Sie Ihr trelloähnliches Layout mit CSS-Raster und Flexbox mit Medienabfragen zur Anpassung Ihres Layouts anhand der Bildschirmgröße. Sie können Medienabfragen verwenden, um die Anzahl der Netzspalten zu ändern oder die Flex -Eigenschaften Ihrer Listen und Karten anzupassen. Auf diese Weise kann sich Ihr Layout an verschiedene Bildschirmgrößen und -orientierungen anpassen und eine konsistente Benutzererfahrung auf allen Geräten sicherstellen. Trello-ähnliches Layout kann mit JavaScript erreicht werden. Sie können JavaScript verwenden, um Ihren Karten Drag & Drop-Funktionen hinzuzufügen, sodass Benutzer Karten zwischen Listen verschieben können. Sie können auch JavaScript verwenden, um andere interaktive Funktionen hinzuzufügen, z. B. die Möglichkeit, neue Karten oder Listen hinzuzufügen.

Gibt es Einschränkungen bei der Verwendung von CSS-Raster und Flexbox zum Erstellen eines trelloähnlichen Layouts? Beispielsweise werden sie bei älteren Browsern möglicherweise nicht vollständig unterstützt. Auch wenn sie ein flexibles Layout -System bereitstellen, sind sie möglicherweise nicht für alle Arten von Layouts geeignet. Es ist wichtig, diese Einschränkungen zu verstehen und bei Bedarf alternative Lösungen zu berücksichtigen.

Wie kann ich das Erscheinungsbild meines trelloähnlichen Layouts anpassen? mit CSS. Sie können CSS verwenden, um die Farben, Schriftarten und andere visuelle Elemente Ihres Layouts zu ändern. Sie können auch CSS verwenden, um Effekte wie Schatten oder Übergänge hinzuzufügen, um die Benutzererfahrung zu verbessern. 🎜> Während CSS -Gitter und Flexbox relativ fortschrittliche CSS -Funktionen sind, können sie mit einigen Studien und Praxis erlernt werden. Es gibt viele online verfügbare Ressourcen, einschließlich Tutorials und Anleitungen, mit denen Sie lernen können, wie diese Funktionen verwendet werden. Mit einiger Zeit und Mühe können Sie mit CSS-Raster und Flexbox ein trelloähnliches Layout erstellen, auch wenn Sie ein Anfänger sind. 🎜> Probleme mit der Fehlerbehebung mit Ihrem trelloähnlichen Layout können mit Entwicklertools in Ihrem Browser durchgeführt werden. Mit diesen Tools können Sie Ihre HTML und Ihr CSS inspizieren, um Probleme zu identifizieren und zu beheben. Sie können auch Online-Foren oder Communities wie Stack-Überlauf verwenden, um Fragen zu stellen und Hilfe von anderen Entwicklern zu erhalten. Trello-ähnliches Layout für die Leistung kann mehrere Strategien beinhalten. Dies beinhaltet die Minimierung Ihres CSS und Ihres JavaScript, die Verwendung effizienter CSS -Selektoren und die Optimierung Ihrer Bilder. Sie können auch Leistungstools wie Google Lighthouse verwenden, um Ihr Layout zu analysieren und Verbesserungsbereiche zu identifizieren.

Das obige ist der detaillierte Inhalt vonErstellen eines Trello -Layouts mit CSS Grid und Flexbox. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!