Grid Layout in MAUI

 In this example we are going to see GridLayoutEXP1 Example in MAUI.

1) Add new page and Update code as below.

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="MauiApp1.GridLayoutEXP1"

             Title="GridLayoutEXP1">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="50" />

            <RowDefinition Height="50" />

            <RowDefinition Height="50" />

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="Auto" />

            <ColumnDefinition />

            <ColumnDefinition />

        </Grid.ColumnDefinitions>

        <Button Text="Column 0,Row 0"

           WidthRequest="200"  />

        <Button Grid.Column="1"

           Text="Column 1,Row 0" />

        <Button Grid.Row="1"

           Text="Column 0,Row 1" />

        <Button Grid.Column="1"

           Grid.Row="1"

           Text="Column 1,Row 1" />

        <Button BackgroundColor="Green"

            Grid.Row="2"

            Grid.Column="0"

           Grid.ColumnSpan="2"

           Text="Column Span" />

        <Button  BackgroundColor="Red"

            Grid.Column="2"

           Grid.RowSpan="3"

           Text="Row Span" />

    </Grid>    

</ContentPage>

Output:

Code in Github: https://github.com/adi501/MAUI

Grid format example in react native

• Create Components folder under src folder
• Add Grid.js file and add below Code

import React from "react";

import { Dimensions, FlatList, Text, View, StyleSheet } from "react-native";

const data = [

  { id: "a", value: "A" },

  { id: "b", value: "B" },

  { id: "c", value: "C" },

  { id: "d", value: "D" },

  { id: "e", value: "E" },

  { id: "f", value: "F" }

];

const numColumns = 3;

const size = Dimensions.get("window").width / numColumns;

console.log(size);

const styles = StyleSheet.create({

  container: {

    margin: 10

  },

  itemContainer: {

    width: size,

    height: size

  },

  item: {

    flex: 1,

    margin: 3,

    backgroundColor: "lightblue"

  }

});

function Grid() {

  return (

    <View style={styles.container}>

      <FlatList

        data={data}

        renderItem={({ item }) => (

          <View style={styles.itemContainer}>

            <Text style={styles.item}>{item.value}</Text>

          </View>

        )}

        keyExtractor={item => item.id}

        numColumns={numColumns}

      />

    </View>

  );

}

export default Grid;

• Open App.js file and update code as below\

import React from 'react';

import { View,StyleSheet } from 'react-native';

import Grid from './src/components/Grid'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <Grid/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

Output: