adapt imageView to gridpane cells size

Question

I am here asking for your advice and help with an interface. I am trying to reproduce an interface ( attached image). I have some doubts about the middle part. I don't know how to make the images of the cards resizable and responsive according to the size of the cells of the grid pane. For now, it works by code, but I don't think mixing front and back is a good practice. And my CSS doesn't work.

Here is CardImpl class that represents a card

@Getter
@Setter
@ToString
@Slf4j
public abstract class CardImpl extends ImageView implements Serializable, Card {
    @Serial
    private static final long serialVersionUID = 1L;
    private final int cardId;
    private final String name;
    private final String description;
    private final String bigCardImage;
    private final String smallCardImage;
    private String backImage = "C://Users//Lola//IdeaProjects//demo//src//main//resources//com//example//yugioh//images//Yugioh_Card_Back.jpg";
    private final List<String> types;
    private final String monsterRace;
    private Face face = Face.UP;

    /**
     * Constructor used to generate a card from data exported from a database.
     * @param card ResultSet containing card information.
     */
    public CardImpl(ResultSet card) throws SQLException {
        this.cardId = card.getInt("id");
        this.name = card.getString("name");
        this.description = card.getString("desc");
        this.smallCardImage = card.getString("image_url_small");
        this.bigCardImage = card.getString("image_url");
        this.monsterRace =  card.getString("race");
        this.types = parseTypeList(card.getString("type"));
    }

    /**
     * Parses a string of types and sets the types of this card accordingly.
     * The types are expected to be separated by a space character.
     * @param types a string of types to be parsed and set for this card
     * @throws NullPointerException if the input string is null
     */
    public List<String> parseTypeList( String types) {
        String[] separator = {" "};
        String[] typeList = types.split(Arrays.toString(separator));
        return Arrays.asList(typeList);
    }
}

Here is a snippet of the code of the controller, that want to change :

 public void addCard(CardImpl card){
        card.setImage(new Image(card.getSmallCardImage()));
        
           //TO DO: WANT TO REMOVE THE FRONT CODE AND PUT IT IN AS CSS IF POSSIBLE
            /*card.setImage(new Image(card.getSmallCardImage()));
            card.setFitWidth(150);
            card.setFitHeight(150);*/

        int row = cardList.getRowCount();
        int childrenSize = cardList.getChildren().size();
        int col = cardList.getChildren().size() % 5;

        if (childrenSize != 0 && col % 5 == 0) {
            row++;
        }
        cardList.add(card, col, row - 1);
    }

Here is the fxml file :

<AnchorPane onDragOver="#dragOver" prefHeight="800.0" prefWidth="800.0" stylesheets="@../css/Deck.css" xmlns="http://javafx.com/javafx/19" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.yugioh.controllers.DeckController">
    <VBox prefHeight="800.0" prefWidth="800.0" spacing="7.0" AnchorPane.bottomAnchor="1.0" AnchorPane.leftAnchor="1.0" AnchorPane.rightAnchor="1.0" AnchorPane.topAnchor="1.0">
        <Label fx:id="deckType" prefHeight="50.0" prefWidth="800.0" styleClass="container" stylesheets="@../css/Deck.css" text="Label">
         <font>
            <Font size="18.0" />
         </font>
      </Label>
        <GridPane fx:id="cardList" alignment="CENTER" gridLinesVisible="true" onDragDropped="#dragDropped" onDragEntered="#dragEntered" onDragExited="#dragExited" onDragOver="#dragOver" onMouseClicked="#remove" prefHeight="756.0" prefWidth="798.0" styleClass="gridPane" VBox.vgrow="NEVER">
            <columnConstraints>
                <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
            </columnConstraints>
            <rowConstraints>
                <RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="30.0" vgrow="SOMETIMES" />
            </rowConstraints>
         <VBox.margin>
            <Insets />
         </VBox.margin>
        </GridPane>
      <padding>
         <Insets top="10.0" />
      </padding>
    </VBox>
</AnchorPane>

and finally CSS :

Label
{
    -fx-text-fill: white;
    -fx-text-alignment: left;
    -fx-padding: 0px 0px 0px 10px;
    -fx-line-height: 40px;
    -fx-max-height: 40px;
    -fx-margin: 10px 0px 7px 0px;
}

.container{
    -fx-border-radius: 10px;
    -fx-border-color: #777777;
    -fx-border-width: 1px;
    -fx-background-color: #111925;
    -fx-margin: 10px 0px 7px 0px; /* Add the margin here */
}

.gridPane > ImageView{
     -fx-pref-width: 50px;
     -fx-pref-height: 50px;
}