Row/Column with Jetpack Compose

• You can see how to use rows and columns in Jetpack compose with this code

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Compose_BasicsTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {

                    MainScreen()
                }
            }
        }
    }
}

@Composable
fun MainScreen(){
    Column(horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center) {
        Row{
            Column {
                TextCell(text = "1")
                TextCell(text = "2")
                TextCell(text = "3")
            }
            Column {
                TextCell(text = "4")
                TextCell(text = "5")
                TextCell(text = "6")
            }
            Column {
                TextCell(text = "7")
                TextCell(text = "8")
            }
        }
        Row {
           TextCell(text = "9")
           TextCell(text = "10")
           TextCell(text = "11")
        }
    }
}

@Composable
fun TextCell(text:String,modifier:Modifier = Modifier){
    val cellModifier = Modifier
        .padding(4.dp)
        .size(100.dp, 100.dp)
        .border(width = 4.dp, color = Color.Green)

    Text(text = text,
    cellModifier.then(modifier),
    fontSize = 70.sp,
    fontWeight = FontWeight.Bold,
    textAlign = TextAlign.Center
    )
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    Compose_BasicsTheme {
         MainScreen()
    }