How to display a grid in TW?

[olafo...@gmail.com]

Hello Folks,

since a short time i have been exploring the TW world and for the moment i was trying to use a grid in TW.
I wrote one which is correctly displayed in my browser but not in TW.
The font(style) / colors / sizes of the boxes is correct but the arrangement of the boxes is not. Every box is displayed with a width of the tiddler-width. One under the next.
I changed the fixed total width of my grid from 500 to 50px because i thought maybe the problem is caused due box-width > tiddler-width but it had no effect.

I hope you can help and tell me where my mistake is.

Thank you in advance.

I have a Tiddler myStyle taged with $:/tags/Stylesheet including the following code:

<code>
.grid {
    background-color: beige;
    border-radius: 5px;
    padding: 2px;
    margin: auto;
    width: 500px;
    display: grid;
    grid-template-columns: 10% 30% 1fr;
    grid-gap: 5px 10px ;
}

.box {
    background-color: lightgrey;
    color: black;
    border-radius: 5px;
    border: 2px black solid;
}
   
.Nummer {
    grid-area: 1/1/2/2;
    padding: 7px;
    font-size: 140%;
    font-weight: bold;
    text-align: center;
}

.Hersteller {
    grid-area: 1/2/2/3;
    padding: 12px;
    font-size: 120%;
    }
   
.Produktbezeichnung {
    grid-area: 1/3/2/4;
    padding: 12px;
    font-size: 120%;
    }
   
.Besteller_links {
    grid-area: 2/2/auto/3;
    padding: 5px;
    font-size: 100%;
    }
   
.Besteller_rechts {
    grid-area: 2/3/auto/4;
    padding: 5px;
    font-size: 100%;
    }
   
.Link {
    grid-area: 3/2/4/4;
    padding: 5px;
    font-size: 80%;
    }
   
.Link:hover {
    font-size: 100%;
    font-weight: bold;
    color: darkred;
    border: 3px darkred solid;
}
</code>

Besides i hava a tiddler holding the following code:

<code>

  <div class="grid">
    <div class="box Nummer">055</div>
    <div class="box Hersteller">Producer</div>
    <div class="box Produktbezeichnung">Product</div>
    <div class="box Besteller_links">Bestellnummer/n:</div>
    <div class="box Besteller_rechts">with: 200300600<br>without: 200300500</div>
    <div class="box Link">[[LINK.pdf]]</div>
  </div>
</code>

[Ton Gerner]

Hi,

Try to omit the <code> & </code> tags.

Cheers,

Ton

[olafo...@gmail.com]

<code> changes the interpretation only slightly. Extra lines are inserted between my boxes.

To avoid newbie misunderstandings: Do i have to install some kind of plugin or sth.? Because all i did is using the default tw-template plus the code i wrote in my first post.

[@TiddlyTweeter]

Did you look at the (in process beta) MuuriTouch plugin? Is it relevant to your needs?

http://muritest-reloaded.tiddlyspot.com/

Best wishes
Josiah

[olafo...@gmail.com]

Thank you Josiah but iam not able to find any hint on "grids" within the MuuriTouch plugin.

[Ton Gerner]

Hi,

This is what I get when leaving out the <code> & </code> tags. Is that what you want?

[@TiddlyTweeter]

Right. It won't tell you how to do them. It is just a superb instance of them.

Best
Josiah

[olafo...@gmail.com]

Hello Ton,

yes this is exactly what i want and in my browser i have it displayed as well but not inside the tiddler.

[olafo...@gmail.com]

Maybe i get you wrong but my intention is not to arrange tiddlers within a grid but displaying a grid inside a tiddler...

[Ton Gerner]

Hi,

You are sure you took out the <code> & </code> tags in your stylesheet?

I did use your stylesheet (without <code> & </code> tags) and your tiddler (without <code> & </code> tags) which gave the result I presented.

Cheers,

Ton

[olafo...@gmail.com]

Thank you for your effort ton.

I for sure dont use any <code> tag in my shadow-tiddler myStyle nor do i use any other shadow-tiddler defining any <code> as far as i know.
But since u are insisting on the <code> issue i tried it again in a naked TW (i thought my TW can still be called naked since i only use this one shadow-t) and it worked like you said.

So it seems that parts of my code are overwritten by another instance i cannot name at the moment. But i will try to find out where. At least my grid-code seems to be correct.

Thanks your your patience.

Greets Olaf

[TonyM]

Olaf,

Could you have mistakenly set the tiddler type in edit mode?

Tony