ugrás a tartalomhoz

Archívum - Már 21, 2021

CSS

mind1 valami név · 2021. Már. 21. (V), 18.35
Nem tudom, érdemes minden ilyen apró hülyeségemnek új témát nyitni?

Kitennék egy oldalra, nagyjából táblázatszerűen három mezőt:

Timestamp | küldő host neve
Üzenet

A Timestamp fix szélességű lenne, a hostnak rögtön mellette kellene kezdődnie és a sor maradékát kitölteni, az Üzenet pedig az alattuk lévő helyen kellene, hogy megjelenjen, dinamikusan méreteződve.

    .timestamp { grid-area: a; background-color: #EEEEFF; width: 300px; }
    .host { grid-area: b; background-color: #EEEEFF; }
    .message { grid-area: c; background-color: #EEEEFF; }
    .container {
        display:grid;
        grid:
            'a b b b b'
            'c c c c c';
        grid-gap: 2px;
        padding: 8px;
        background-color: #AACCFF;
        border-style: solid;
        border-width: 1px;
    }
És ezt használnám minden egyes sor formázására:

<div class="container">
  <div class="timestamp">timestamp értéke</div>
  <div class="host">küldő host</div>
  <div class="message">a teljes üzenet</div>
</div>
És ez ismétlődne, ahány üzenetet meg akarok jeleníteni.
Majdnem jó, csak a host neve és a timestamp közt egy jókora üres terület marad, de még csak nem is egyforma, mintha a host értékének hosszától függene, de ez sem egyértelmű.
Én meg azt szeretném, ha csak pár pixel lenne köztük.

update: valamit csúnyán elnézhetek, mert a demók amiket találtam, látszólag ugyanazt csinálják, amit én elvárnék (mozilla oldalán, meg talán a w3school-nál), de a sajátomhoz igazítani nem sikerült.

update2: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_grid3 - ez volt az egyik, ami működik.
 ■