added max height for grid items

suthesank · suthesank · commit 161eeabc2916 · 2021-07-02T16:41:13.000+08:00
diff --git a/src/pages/blog/_markets-news.js b/src/pages/blog/_markets-news.js
@@ -11,14 +11,17 @@ const MarketsNewsWrapper = styled.div`
     grid-template-columns: auto auto auto;
     grid-gap: 30px;
     padding: 10px;
+    max-height: 211px;
 
     @media ${device.tabletL} {
         grid-template-columns: auto auto;
+        max-height: 330px;
     }
 
     @media ${device.tabletS} {
         grid-template-columns: auto;
         margin:0 auto;
+        max-height: 668px;
     }
 `
 
@@ -28,6 +31,10 @@ const StyledSpan = styled.span`
     border-radius: 8px;
 `
 
+const StyledFlex = styled(Flex)`
+    max-height: 83px;
+`
+
 const MarketNews = () => {
     return (
         <SectionContainer>
@@ -39,7 +46,7 @@ const MarketNews = () => {
                     <MarketsNewsWrapper>
                         {market_news_data.filter((data) => data.report_type === "Weekly report").slice(0, 6).map((data, index) => {
                             return (
-                                <Flex key={index}>
+                                <StyledFlex key={index}>
                                     <img src={data.img_source} width="104px" height="78px" />
                                     <Flex ml="8px" fd="column">
                                         <Header type="paragraph-2" color="blue-10">
@@ -55,7 +62,7 @@ const MarketNews = () => {
                                             </Header>
                                         </Flex>
                                     </Flex>
-                                </Flex>
+                                </StyledFlex>
                             )
                         })}
                     </MarketsNewsWrapper>
