how to create a grid and cells in Yew app

Question

Yew app.

I am trying to build a grid and inside grid I would like to arrange cells in Yew app.

I would like to have My grid a 4*4 array
Cells size would be 5px width and height
I also need to set the Cell color property based on the method I solve on the grid ?
How can I create Cell from Grid ? Can i use the create method Yew provides ?

Please advise on the components structure for the same . Also how can I get the properties(color) of the cell from grid and change it

Normally one would start with css. Have you created anything? Your question is kinda broad, I would recommend you share some code.. — Njuguna Mureithi, Dec 28 '20 at 07:06
Code is here https://play.rust-lang.org/?version=stable&mode=debug&edition=2018&gist=83f14a0699f34556056cd3d090dc3499 how should create cell from grid? — Naveen, Dec 28 '20 at 18:55

score 0 · Answer 1 · answered Mar 10 '23 at 03:33

Question is quite broad, but let me provide a generic solution here. As such, grid layout has nothing to do with yew and can be achieved with CSS:

.grid-container {
    display: grid;
    gap: 50px;
    grid-template-columns: auto auto auto;
    background-color: black;
    padding: 10px;
}

.grid-item {
    border: 10px solid white;
    color: white;
    padding: 20px;
    text-align: center;
}

you would usually put it to style.css file and declare it in index.html

<head>
    <link data-trunk rel="css" href="style.css">
</head>

and then in yew:

use yew::prelude::*;

#[function_component(App)]
fn app() -> Html {
    let grid = (0..100).map(|num| html! {
    <div class="grid-item">{num}</div>
        }).collect::<Html>();
    html! {
        <div class="grid-container">
            {grid}
        </div>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}

It will look like this:

how to create a grid and cells in Yew app

1 Answers1