Please explain grid and flex for a newbie

[NanoscaleSimulations]

Can someone explain how grid and flex work?
I am new to web design and have never worked with CSS and html etc before.
I am trying to create a hero section with a Title and some text under it on the left side and a video on the right side. However, I want the video to span maybe 2/3 of the grid.

I tried this:

first_section =pc.flex(
		pc.grid_item(
			pc.span(
				"Fast & Easy ",
				color = textcolor,
				font = style.fontheader,
				as_ = style.bold,
				font_size = "3rem",
			),
			pc.span(
				"Atomistic ",
				background_image = "linear-gradient(300deg, #b4e7f9 0.75%, #3b9fe2 88.52%)",
				background_clip = "text",
				font = style.fontheader,
				as_ = style.bold,
				font_size="3rem",
				h = "auto",
				#margin_right = "10px"
			),
			pc.span(
				"Calculations", 
				color = textcolor,
				font = style.fontheader,
				as_ = style.bold,
				font_size = "3rem",
				#h = "auto",
			),
			pc.text(
				"Execute calculations in seconds and get valuable information about your atomic system.",
				color = style.greytextcol,
				font = style.font,
				font_size = "2rem",
				width = "585px",
				h = "auto",
			),
			pc.unordered_list(
				pc.list_item('No coding', color = style.greytextcol, font = style.font, font_size = '2rem'),
				pc.list_item('No installations', color = style.greytextcol, font = style.font, font_size = '2rem'),
				pc.list_item('Focus only on your work', color = style.greytextcol, font = style.font, font_size = '2rem')
			),
			CTA_button,
			col_span=2,
		),

		pc.grid_item(
			pc.video(
				url='link', controls=False, playing='True', width='50rem', loop=True
			),
			col_span=3,
			
		),

	template_colums='repeat(5, 1fr)',
	width = '100%',
	)

[picklelo]

These are just wrappers around some Chakra components - check out the examples there. We will update our docs here to be more thorough.

• https://chakra-ui.com/docs/components/grid
• https://chakra-ui.com/docs/components/flex