Trying to make this component responsive

src/Components/TopicList.js

@@ -13,23 +13,23 @@ export default function TopicList(props) {
 		setExpanded(!expanded);
 	}
 
-  return (
+	return (
 		<Wrapper>
 			<Title>Módulos</Title>
 			<Grid
 				container
-				direction="row"
-				justify="space-evenly"
-				alignItems="center"
+				spacing={3}
 			>
-				{ props.topicos.slice(0, (expanded ? -1 : 5)).map(t => {
-						return (
-							<TopicCard topico_obj={t} colecao_id={props.colecao_id}/>
-						);
-					})
+				{props.topicos.slice(0, (expanded ? -1 : 5)).map((t, index) => {
+					return (
+						<Grid item key={index} md={3}>
+							<TopicCard topico_obj={t} colecao_id={props.colecao_id} />
+						</Grid>
+					);
+				})
 				}
 			</Grid>
-			{ props.topicos.length > 5 ? 
+			{props.topicos.length > 5 ?
 				<Grid container
 					direction="column"
 					justify="flex-start"
@@ -37,32 +37,32 @@ export default function TopicList(props) {
 				>
 					<Grid item>
 						<Fab size="medium" color="secondary" aria-label="edit" onClick={handleFabClick}>
-							{expanded ? <ExpandLessIcon /> : <ExpandMoreIcon /> }
+							{expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
 						</Fab>
 					</Grid>
 					<Grid item>
 						<FabText>
-							{ expanded ? "VER MENOS" : "VER TODOS OS MÓDULOS" }
+							{expanded ? "VER MENOS" : "VER TODOS OS MÓDULOS"}
 						</FabText>
 					</Grid>
 				</Grid>
-			: <div></div>
+				: <div></div>
 			}
 		</Wrapper>
-  );
+	);
 }
 
-const FabText=styled.span`
+const FabText = styled.span`
 	color: #666;
 	font-weight: 900;
 	line-height: 2em;
 `
-const Title=styled.h1`
+const Title = styled.h1`
 	font-weight: 100;
 	margin-left: 30px;
 	color: rgb(102, 102, 102);
 `
-const Wrapper=styled.div`
+const Wrapper = styled.div`
 		margin-right : auto;
 		margin-left : auto;
 		margin-bottom: 30px;