ugrás a tartalomhoz

Archívum - Már 21, 2021 - Fórum téma

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.
  1. .timestamp { grid-area: a; background-color: #EEEEFF; width: 300px; }  
  2. .host { grid-area: b; background-color: #EEEEFF; }  
  3. .message { grid-area: c; background-color: #EEEEFF; }  
  4. .container {  
  5.     display:grid;  
  6.     grid:  
  7.         'a b b b b'  
  8.         'c c c c c';  
  9.     grid-gap: 2px;  
  10.     padding: 8px;  
  11.     background-color: #AACCFF;  
  12.     border-style: solid;  
  13.     border-width: 1px;  
  14. }  
És ezt használnám minden egyes sor formázására:
  1. <div class="container">  
  2.   <div class="timestamp">timestamp értéke</div>  
  3.   <div class="host">küldő host</div>  
  4.   <div class="message">a teljes üzenet</div>  
  5. </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.
 ■